@razorpay/blade 3.7.1 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @razorpay/blade
 
+## 4.0.0
+
+### Major Changes
+
+- d747de4: chore: Badge design changes
+
+  - Adds a new small size
+  - Bumps existing small & medium to medium & large respectively
+  - Horizontal padding changes in the large size
+
+  ### Migration Guide for Badge Consumers
+
+  1. For existing `small` size badge, bump the size from `small` to `medium`
+
+  ```diff
+  - <Badge size='small'>...</Badge>
+  + <Badge size='medium'>...</Badge>
+  ```
+
+  2. For existing `medium` size badge, bump the size from `medium` to `large`
+
+  ```diff
+  - <Badge size='medium'>...</Badge>
+  + <Badge size='large'>...</Badge>
+  ```
+
+  3. For existing badge with no `size` specified, add `size='large'` since default size is `medium`
+     > Note: The horizontal padding is changed from `8px` to `12px` for the new `large` size which makes it visually bigger than the existing `medium` size
+
+  ```diff
+  - <Badge>...</Badge>
+  + <Badge size='large'>...</Badge>
+  ```
+
+## 3.8.0
+
+### Minor Changes
+
+- 32c1f05: feat(Counter): design changes
+
+  - Added small variant in Counter
+  - Fixed italic font
+
 ## 3.7.1
 
 ### Patch Changes

package/build/components/index.d.ts

@@ -993,7 +993,7 @@ declare type BadgeProps = {
      *
      * @default 'medium'
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Icon to be displayed in the badge.
      * Accepts a component of type `IconComponent` from Blade.
@@ -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

@@ -993,7 +993,7 @@ declare type BadgeProps = {
      *
      * @default 'medium'
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Icon to be displayed in the badge.
      * Accepts a component of type `IconComponent` from Blade.
@@ -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';
 };
 /**
@@ -2019,10 +2022,10 @@ declare type TextForwardedAs = {
 };
 declare const getTextProps: <T extends {
     variant: TextVariant;
-}>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "type" | "size" | "weight" | "contrast" | "variant">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
+}>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "type" | "size" | "weight" | "variant" | "contrast">) => 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

@@ -3233,7 +3233,7 @@ var ThemeContext=createContext({theme:null,colorScheme:'light',platform:'onDeskt
 
 var BladeProvider=function BladeProvider(_ref){var themeTokens=_ref.themeTokens,initialColorScheme=_ref.colorScheme,children=_ref.children;if(!themeTokens){throw new Error("[BladeProvider]: Expected valid themeTokens of type ThemeTokens to be passed but found "+typeof themeTokens);}if(initialColorScheme&&!colorSchemeNamesInput.includes(initialColorScheme)){throw new Error("[BladeProvider]: Expected color scheme to be one of ["+colorSchemeNamesInput.toString()+"] but received "+initialColorScheme);}var _useColorScheme=useColorScheme(initialColorScheme),colorScheme=_useColorScheme.colorScheme,setColorScheme=_useColorScheme.setColorScheme;var _useBreakpoint=useBreakpoint({breakpoints:themeTokens.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var onColorMode="on"+toTitleCase(colorScheme);var onDeviceType="on"+toTitleCase(matchedDeviceType);var theme=_extends({},themeTokens,{colors:themeTokens.colors[onColorMode],shadows:_extends({},themeTokens.shadows,{color:themeTokens.shadows.color[onColorMode]}),typography:themeTokens.typography[onDeviceType]});var themeContextValue={theme:theme,colorScheme:colorScheme,setColorScheme:setColorScheme,platform:onDeviceType};return jsx(ThemeContext.Provider,{value:themeContextValue,children:jsx(ThemeProvider,{theme:theme,children:children})});};
 
-var iconSize={xsmall:8,small:12,medium:16,large:20,xlarge:24,'2xlarge':32};function useIconProps(_ref){var size=_ref.size,color=_ref.color;var _useTheme=useTheme(),theme=_useTheme.theme;var height=makeSize(iconSize[size]);var width=makeSize(iconSize[size]);var iconColor=color==='currentColor'?'currentColor':get_1(theme.colors,color,'');return {height:height,width:width,iconColor:iconColor};}
+var iconSize$1={xsmall:8,small:12,medium:16,large:20,xlarge:24,'2xlarge':32};function useIconProps(_ref){var size=_ref.size,color=_ref.color;var _useTheme=useTheme(),theme=_useTheme.theme;var height=makeSize(iconSize$1[size]);var width=makeSize(iconSize$1[size]);var iconColor=color==='currentColor'?'currentColor':get_1(theme.colors,color,'');return {height:height,width:width,iconColor:iconColor};}
 
 var ArrowDownIcon=function ArrowDownIcon(_ref){var size=_ref.size,color=_ref.color;var _useIconProps=useIconProps({size:size,color:color}),height=_useIconProps.height,width=_useIconProps.width,iconColor=_useIconProps.iconColor;return jsx(Svg,{height:height,width:width,viewBox:"0 0 24 24",fill:"none",children:jsx(Path,{d:"M13 4a1 1 0 1 0-2 0v13.586l-4.293-4.293a1 1 0 0 0-1.414 1.414l6 6a1 1 0 0 0 1.414 0l6-6a1 1 0 0 0-1.414-1.414L13 17.586V4Z",fill:iconColor})});};
 
@@ -3317,13 +3317,13 @@ var Box=styled.View(getBoxStyles);
 
 var getBaseTextStyles=function getBaseTextStyles(_ref){var _ref$color=_ref.color,color=_ref$color===void 0?'surface.text.normal.lowContrast':_ref$color,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?'text':_ref$fontFamily,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?200:_ref$fontSize,_ref$fontWeight=_ref.fontWeight,fontWeight=_ref$fontWeight===void 0?'regular':_ref$fontWeight,_ref$fontStyle=_ref.fontStyle,fontStyle=_ref$fontStyle===void 0?'normal':_ref$fontStyle,_ref$textDecorationLi=_ref.textDecorationLine,textDecorationLine=_ref$textDecorationLi===void 0?'none':_ref$textDecorationLi,_ref$lineHeight=_ref.lineHeight,lineHeight=_ref$lineHeight===void 0?'l':_ref$lineHeight,textAlign=_ref.textAlign,theme=_ref.theme;var textColor=get_1(theme.colors,color);var themeFontFamily=theme.typography.fonts.family[fontFamily];var themeFontSize=makeTypographySize(theme.typography.fonts.size[fontSize]);var themeFontWeight=theme.typography.fonts.weight[fontWeight];var themeLineHeight=makeTypographySize(theme.typography.lineHeights[lineHeight]);return {color:textColor,fontFamily:themeFontFamily,fontSize:themeFontSize,fontWeight:themeFontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:themeLineHeight,textAlign:textAlign,margin:0,padding:0};};
 
-var _excluded$3=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","as"];var StyledBaseText$1=styled.Text(function(_ref){var color=_ref.color,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,fontWeight=_ref.fontWeight,fontStyle=_ref.fontStyle,textDecorationLine=_ref.textDecorationLine,lineHeight=_ref.lineHeight,textAlign=_ref.textAlign,as=_ref.as,props=_objectWithoutProperties(_ref,_excluded$3);if(as){throw new Error("[Blade: BaseText]: \"as\" prop is not supported for BaseText on React Native");}else {return getBaseTextStyles({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,theme:props.theme});}});var BaseText=function BaseText(_ref2){var id=_ref2.id,color=_ref2.color,fontFamily=_ref2.fontFamily,fontSize=_ref2.fontSize,fontWeight=_ref2.fontWeight,fontStyle=_ref2.fontStyle,textDecorationLine=_ref2.textDecorationLine,lineHeight=_ref2.lineHeight,as=_ref2.as,textAlign=_ref2.textAlign,children=_ref2.children,truncateAfterLines=_ref2.truncateAfterLines,className=_ref2.className,style=_ref2.style,_ref2$accessibilityPr=_ref2.accessibilityProps,accessibilityProps=_ref2$accessibilityPr===void 0?{}:_ref2$accessibilityPr;return jsx(StyledBaseText$1,_extends({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,as:as,textAlign:textAlign,numberOfLines:truncateAfterLines,className:className,style:style,id:id},makeAccessible(accessibilityProps),{children:children}));};
+var _excluded$3=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","as"];var StyledBaseText=styled.Text(function(_ref){var color=_ref.color,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,fontWeight=_ref.fontWeight,fontStyle=_ref.fontStyle,textDecorationLine=_ref.textDecorationLine,lineHeight=_ref.lineHeight,textAlign=_ref.textAlign,as=_ref.as,props=_objectWithoutProperties(_ref,_excluded$3);if(as){throw new Error("[Blade: BaseText]: \"as\" prop is not supported for BaseText on React Native");}else {return getBaseTextStyles({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,theme:props.theme});}});var BaseText=function BaseText(_ref2){var id=_ref2.id,color=_ref2.color,fontFamily=_ref2.fontFamily,fontSize=_ref2.fontSize,fontWeight=_ref2.fontWeight,fontStyle=_ref2.fontStyle,textDecorationLine=_ref2.textDecorationLine,lineHeight=_ref2.lineHeight,as=_ref2.as,textAlign=_ref2.textAlign,children=_ref2.children,truncateAfterLines=_ref2.truncateAfterLines,className=_ref2.className,style=_ref2.style,_ref2$accessibilityPr=_ref2.accessibilityProps,accessibilityProps=_ref2$accessibilityPr===void 0?{}:_ref2$accessibilityPr;return jsx(StyledBaseText,_extends({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,as:as,textAlign:textAlign,numberOfLines:truncateAfterLines,className:className,style:style,id:id},makeAccessible(accessibilityProps),{children:children}));};
 
 var getProps$3=function getProps(_ref){var size=_ref.size,type=_ref.type,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:600,fontWeight:'bold',fontStyle:'normal',lineHeight:'4xl',fontFamily:'text',accessibilityProps:isPlatformWeb?{}:{role:'heading'}};if(size==='small'){props.fontSize=600;props.lineHeight='4xl';props.as=isPlatformWeb?'h3':undefined;}else if(size==='medium'){props.fontSize=700;props.lineHeight='4xl';props.as=isPlatformWeb?'h2':undefined;}else if(size==='large'){props.fontSize=1000;props.lineHeight='6xl';props.as=isPlatformWeb?'h1':undefined;}return props;};var Title=function Title(_ref2){var _ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,_ref2$type=_ref2.type,type=_ref2$type===void 0?'normal':_ref2$type,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,children=_ref2.children;var props=getProps$3({size:size,type:type,contrast:contrast});return jsx(BaseText,_extends({},props,{children:children}));};
 
 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(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})});};
 
@@ -3331,7 +3331,7 @@ var getBaseButtonStyles=function getBaseButtonStyles(_ref){var defaultBorderColo
 
 var StyledPressable=styled(Animated.createAnimatedComponent(Pressable))(function(props){return _extends({},getBaseButtonStyles(props),{alignSelf:'center'});});var StyledBaseButton=function StyledBaseButton(_ref){var onClick=_ref.onClick,_children=_ref.children,minHeight=_ref.minHeight,buttonPaddingTop=_ref.buttonPaddingTop,buttonPaddingBottom=_ref.buttonPaddingBottom,buttonPaddingLeft=_ref.buttonPaddingLeft,buttonPaddingRight=_ref.buttonPaddingRight,isFullWidth=_ref.isFullWidth,disabled=_ref.disabled,defaultBackgroundColor=_ref.defaultBackgroundColor,defaultBorderColor=_ref.defaultBorderColor,hoverBackgroundColor=_ref.hoverBackgroundColor,activeBackgroundColor=_ref.activeBackgroundColor,focusBackgroundColor=_ref.focusBackgroundColor,focusRingColor=_ref.focusRingColor,hoverBorderColor=_ref.hoverBorderColor,activeBorderColor=_ref.activeBorderColor,focusBorderColor=_ref.focusBorderColor,borderWidth=_ref.borderWidth,borderRadius=_ref.borderRadius,motionDuration=_ref.motionDuration,motionEasing=_ref.motionEasing,isLoading=_ref.isLoading,accessibilityProps=_ref.accessibilityProps;var _useTheme=useTheme(),theme=_useTheme.theme;var isPressed=useSharedValue(false);var duration=get_1(theme.motion,motionDuration);var easing=get_1(theme.motion,motionEasing);var animatedStyles=useAnimatedStyle(function(){var _f=function _f(){return {backgroundColor:withTiming(isPressed.value?activeBackgroundColor:defaultBackgroundColor,{duration:duration,easing:easing}),borderColor:withTiming(isPressed.value?activeBorderColor:defaultBorderColor,{duration:duration,easing:easing})};};_f._closure={withTiming:withTiming,isPressed:isPressed,activeBackgroundColor:activeBackgroundColor,defaultBackgroundColor:defaultBackgroundColor,duration:duration,easing:easing,activeBorderColor:activeBorderColor,defaultBorderColor:defaultBorderColor};_f.asString="function _f(){const{withTiming,isPressed,activeBackgroundColor,defaultBackgroundColor,duration,easing,activeBorderColor,defaultBorderColor}=jsThis._closure;{return{backgroundColor:withTiming(isPressed.value?activeBackgroundColor:defaultBackgroundColor,{duration:duration,easing:easing}),borderColor:withTiming(isPressed.value?activeBorderColor:defaultBorderColor,{duration:duration,easing:easing})};}}";_f.__workletHash=6870832376373;_f.__location="/home/runner/work/blade/blade/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx (46:42)";_f.__optimalization=2;global.__reanimatedWorkletInit(_f);return _f;}());return jsx(StyledPressable,_extends({},accessibilityProps,{isLoading:isLoading,onPress:onClick,style:animatedStyles,minHeight:minHeight,buttonPaddingTop:buttonPaddingTop,buttonPaddingBottom:buttonPaddingBottom,buttonPaddingLeft:buttonPaddingLeft,buttonPaddingRight:buttonPaddingRight,isFullWidth:isFullWidth,disabled:disabled,defaultBackgroundColor:defaultBackgroundColor,defaultBorderColor:defaultBorderColor,hoverBackgroundColor:hoverBackgroundColor,activeBackgroundColor:activeBackgroundColor,focusBackgroundColor:focusBackgroundColor,focusRingColor:focusRingColor,hoverBorderColor:hoverBorderColor,activeBorderColor:activeBorderColor,focusBorderColor:focusBorderColor,borderWidth:borderWidth,borderRadius:borderRadius,motionDuration:motionDuration,motionEasing:motionEasing,children:function children(_ref2){var pressed=_ref2.pressed;isPressed.value=pressed;return _children;}}));};
 
-var typography={fonts:{size:{xsmall:75,small:75,medium:100,large:200}},lineHeights:{xsmall:'s',small:'s',medium:'l',large:'m'}};var minHeight$1={xsmall:28,small:32,medium:36,large:48};var buttonPadding={xsmall:{top:0,bottom:0,left:3,right:3},small:{top:0,bottom:0,left:4,right:4},medium:{top:0,bottom:0,left:6,right:6},large:{top:0,bottom:0,left:6,right:6}};var buttonIconOnlyPadding={xsmall:{top:0,bottom:0,left:4,right:4},small:{top:0,bottom:0,left:3,right:3},medium:{top:0,bottom:0,left:3,right:3},large:{top:0,bottom:0,left:4,right:4}};var buttonSizeToIconSizeMap={xsmall:'small',small:'small',medium:'medium',large:'medium'};var buttonIconOnlySizeToIconSizeMap={xsmall:'medium',small:'medium',medium:'large',large:'xlarge'};var buttonSizeToSpinnerSizeMap={xsmall:'small',small:'medium',medium:'medium',large:'large'};var textPadding={xsmall:2,small:2,medium:3,large:3};
+var typography={fonts:{size:{xsmall:75,small:75,medium:100,large:200}},lineHeights:{xsmall:'s',small:'s',medium:'l',large:'m'}};var minHeight={xsmall:28,small:32,medium:36,large:48};var buttonPadding={xsmall:{top:0,bottom:0,left:3,right:3},small:{top:0,bottom:0,left:4,right:4},medium:{top:0,bottom:0,left:6,right:6},large:{top:0,bottom:0,left:6,right:6}};var buttonIconOnlyPadding={xsmall:{top:0,bottom:0,left:4,right:4},small:{top:0,bottom:0,left:3,right:3},medium:{top:0,bottom:0,left:3,right:3},large:{top:0,bottom:0,left:4,right:4}};var buttonSizeToIconSizeMap={xsmall:'small',small:'small',medium:'medium',large:'medium'};var buttonIconOnlySizeToIconSizeMap={xsmall:'medium',small:'medium',medium:'large',large:'xlarge'};var buttonSizeToSpinnerSizeMap={xsmall:'small',small:'medium',medium:'medium',large:'large'};var textPadding={xsmall:2,small:2,medium:3,large:3};
 
 function announce(message){AccessibilityInfo.announceForAccessibility(message);}function clearAnnouncer(_assertiveness){console.warn('[Blade LiveAnnouncer]: clearAnnouncer is not needed in react-native');}function destroyAnnouncer(){console.warn('[Blade LiveAnnouncer]: destroyAnnouncer is not needed in react-native');}
 
@@ -3343,7 +3343,7 @@ var SpinningBox=function SpinningBox(_ref){var children=_ref.children;var _useTh
 
 var getColor=function getColor(_ref){var contrast=_ref.contrast,intent=_ref.intent,theme=_ref.theme;if(intent){return get_1(theme.colors,"feedback."+intent+".action.icon.primary.disabled."+contrast+"Contrast");}else if(contrast=='low'){return get_1(theme.colors,'brand.gray.700.lowContrast');}else {return get_1(theme.colors,'brand.gray.400.lowContrast');}};var BaseSpinner=function BaseSpinner(_ref2){var label=_ref2.label,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?'right':_ref2$labelPosition,accessibilityLabel=_ref2.accessibilityLabel,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,intent=_ref2.intent,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size;var _useTheme=useTheme(),theme=_useTheme.theme;return jsx(Box,{display:"flex",children:jsxs(Box,_extends({display:"flex",alignItems:"center",flexDirection:labelPosition==='right'?'row':'column'},makeAccessible({label:accessibilityLabel,role:'progressbar'}),{children:[jsx(SpinningBox,{children:jsx(SpinnerIcon,{dimensions:makeSize(dimensions[size]),color:getColor({contrast:contrast,intent:intent,theme:theme})})}),label&&label.trim().length>0?jsx(Box,{marginLeft:labelPosition==='right'?'spacing.3':'spacing.0',marginTop:labelPosition==='bottom'?'spacing.3':'spacing.0',children:jsx(Text,{variant:"body",weight:"regular",type:"subdued",size:"small",contrast:contrast,children:label})}):null]}))});};
 
-var getColorToken$1=function getColorToken(_ref){var property=_ref.property,variant=_ref.variant,state=_ref.state,contrast=_ref.contrast,intent=_ref.intent;if(intent&&contrast){return "feedback."+intent+".action."+property+".primary."+state+"."+contrast+"Contrast";}return "action."+property+"."+variant+"."+state;};var getProps$1=function getProps(_ref2){var buttonTypographyTokens=_ref2.buttonTypographyTokens,children=_ref2.children,isDisabled=_ref2.isDisabled,size=_ref2.size,theme=_ref2.theme,variant=_ref2.variant,intent=_ref2.intent,contrast=_ref2.contrast,hasIcon=_ref2.hasIcon;var isIconOnly=hasIcon&&(!children||(children==null?void 0:children.trim().length)===0);var props={iconSize:isIconOnly?buttonIconOnlySizeToIconSizeMap[size]:buttonSizeToIconSizeMap[size],spinnerSize:buttonSizeToSpinnerSizeMap[size],fontSize:buttonTypographyTokens.fonts.size[size],lineHeight:buttonTypographyTokens.lineHeights[size],minHeight:makeSize(minHeight$1[size]),iconPadding:hasIcon&&children!=null&&children.trim()?"spacing."+textPadding[size]:undefined,iconColor:getColorToken$1({property:'icon',variant:variant,contrast:contrast,intent:intent,state:'default'}),textColor:getColorToken$1({property:'text',variant:variant,contrast:contrast,intent:intent,state:'default'}),buttonPaddingTop:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].top]):makeSpace(theme.spacing[buttonPadding[size].top]),buttonPaddingBottom:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].bottom]):makeSpace(theme.spacing[buttonPadding[size].bottom]),buttonPaddingLeft:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].left]):makeSpace(theme.spacing[buttonPadding[size].left]),buttonPaddingRight:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].right]):makeSpace(theme.spacing[buttonPadding[size].right]),text:size==='xsmall'?children==null?void 0:children.trim().toUpperCase():children==null?void 0:children.trim(),defaultBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'default'})),defaultBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'default'})),hoverBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'hover'})),hoverBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'hover'})),activeBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'active'})),activeBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'active'})),focusBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'focus'})),focusBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'focus'})),focusRingColor:get_1(theme.colors,'brand.primary.400'),borderWidth:makeBorderSize(theme.border.width.thin),borderRadius:makeBorderSize(theme.border.radius.small),motionDuration:'duration.xquick',motionEasing:'easing.standard.effective'};if(isDisabled){var disabledBackgroundColor=get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'disabled'}));var disabledBorderColor=get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'disabled'}));props.iconColor=getColorToken$1({property:'icon',variant:variant,contrast:contrast,intent:intent,state:'disabled'});props.textColor=getColorToken$1({property:'text',variant:variant,contrast:contrast,intent:intent,state:'disabled'});props.defaultBackgroundColor=disabledBackgroundColor;props.defaultBorderColor=disabledBorderColor;props.hoverBackgroundColor=disabledBackgroundColor;props.hoverBorderColor=disabledBorderColor;props.activeBackgroundColor=disabledBackgroundColor;props.activeBorderColor=disabledBorderColor;props.focusBackgroundColor=disabledBackgroundColor;props.focusBorderColor=disabledBorderColor;}return props;};var ButtonContent=styled(Box)(function(_ref3){var isHidden=_ref3.isHidden;return {opacity:isHidden?0:1};});var BaseButton=function BaseButton(_ref4){var _ref4$variant=_ref4.variant,variant=_ref4$variant===void 0?'primary':_ref4$variant,intent=_ref4.intent,_ref4$contrast=_ref4.contrast,contrast=_ref4$contrast===void 0?'low':_ref4$contrast,_ref4$size=_ref4.size,size=_ref4$size===void 0?'medium':_ref4$size,Icon=_ref4.icon,_ref4$iconPosition=_ref4.iconPosition,iconPosition=_ref4$iconPosition===void 0?'left':_ref4$iconPosition,_ref4$isDisabled=_ref4.isDisabled,isDisabled=_ref4$isDisabled===void 0?false:_ref4$isDisabled,_ref4$isFullWidth=_ref4.isFullWidth,isFullWidth=_ref4$isFullWidth===void 0?false:_ref4$isFullWidth,_ref4$isLoading=_ref4.isLoading,isLoading=_ref4$isLoading===void 0?false:_ref4$isLoading,onClick=_ref4.onClick,_ref4$type=_ref4.type,type=_ref4$type===void 0?'button':_ref4$type,children=_ref4.children,accessibilityLabel=_ref4.accessibilityLabel;var disabled=isLoading||isDisabled;var _useTheme=useTheme(),theme=_useTheme.theme;if(!Icon&&!(children!=null&&children.trim())){throw new Error("[Blade: BaseButton]: At least one of icon or text is required to render a button.");}var prevLoading=usePrevious(isLoading);useEffect(function(){if(isLoading)announce('Started loading');if(!isLoading&&prevLoading)announce('Stopped loading');},[isLoading,prevLoading]);var _getProps=getProps$1({buttonTypographyTokens:typography,children:children,isDisabled:disabled,size:size,variant:variant,theme:theme,intent:intent,contrast:contrast,hasIcon:Boolean(Icon)}),activeBorderColor=_getProps.activeBorderColor,activeBackgroundColor=_getProps.activeBackgroundColor,defaultBorderColor=_getProps.defaultBorderColor,defaultBackgroundColor=_getProps.defaultBackgroundColor,minHeight=_getProps.minHeight,buttonPaddingTop=_getProps.buttonPaddingTop,buttonPaddingBottom=_getProps.buttonPaddingBottom,buttonPaddingLeft=_getProps.buttonPaddingLeft,buttonPaddingRight=_getProps.buttonPaddingRight,focusBorderColor=_getProps.focusBorderColor,focusBackgroundColor=_getProps.focusBackgroundColor,focusRingColor=_getProps.focusRingColor,fontSize=_getProps.fontSize,hoverBorderColor=_getProps.hoverBorderColor,hoverBackgroundColor=_getProps.hoverBackgroundColor,iconColor=_getProps.iconColor,iconSize=_getProps.iconSize,iconPadding=_getProps.iconPadding,spinnerSize=_getProps.spinnerSize,lineHeight=_getProps.lineHeight,text=_getProps.text,textColor=_getProps.textColor,borderWidth=_getProps.borderWidth,borderRadius=_getProps.borderRadius,motionDuration=_getProps.motionDuration,motionEasing=_getProps.motionEasing;return jsxs(StyledBaseButton,{accessibilityProps:_extends({},makeAccessible({role:'button',label:accessibilityLabel})),isLoading:isLoading,disabled:disabled,activeBorderColor:activeBorderColor,activeBackgroundColor:activeBackgroundColor,defaultBorderColor:defaultBorderColor,minHeight:minHeight,buttonPaddingTop:buttonPaddingTop,buttonPaddingBottom:buttonPaddingBottom,buttonPaddingLeft:buttonPaddingLeft,buttonPaddingRight:buttonPaddingRight,defaultBackgroundColor:defaultBackgroundColor,focusBorderColor:focusBorderColor,focusBackgroundColor:focusBackgroundColor,focusRingColor:focusRingColor,hoverBorderColor:hoverBorderColor,hoverBackgroundColor:hoverBackgroundColor,isFullWidth:isFullWidth,onClick:onClick,type:type,borderWidth:borderWidth,borderRadius:borderRadius,motionDuration:motionDuration,motionEasing:motionEasing,children:[isLoading?jsx(Box,{display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",top:0,left:0,bottom:0,right:0,children:jsx(BaseSpinner,{accessibilityLabel:"Loading",size:spinnerSize,intent:intent,contrast:contrast})}):null,jsxs(ButtonContent,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",flex:1,isHidden:isLoading,children:[Icon&&iconPosition=='left'?jsx(Box,{paddingRight:iconPadding,display:"flex",justifyContent:"center",alignItems:"center",children:jsx(Icon,{size:iconSize,color:iconColor})}):null,text?jsx(BaseText,{lineHeight:lineHeight,fontSize:fontSize,fontWeight:"bold",textAlign:"center",color:textColor,children:text}):null,Icon&&iconPosition=='right'?jsx(Box,{paddingLeft:iconPadding,display:"flex",justifyContent:"center",alignItems:"center",children:jsx(Icon,{size:iconSize,color:iconColor})}):null]})]});};
+var getColorToken$1=function getColorToken(_ref){var property=_ref.property,variant=_ref.variant,state=_ref.state,contrast=_ref.contrast,intent=_ref.intent;if(intent&&contrast){return "feedback."+intent+".action."+property+".primary."+state+"."+contrast+"Contrast";}return "action."+property+"."+variant+"."+state;};var getProps$1=function getProps(_ref2){var buttonTypographyTokens=_ref2.buttonTypographyTokens,children=_ref2.children,isDisabled=_ref2.isDisabled,size=_ref2.size,theme=_ref2.theme,variant=_ref2.variant,intent=_ref2.intent,contrast=_ref2.contrast,hasIcon=_ref2.hasIcon;var isIconOnly=hasIcon&&(!children||(children==null?void 0:children.trim().length)===0);var props={iconSize:isIconOnly?buttonIconOnlySizeToIconSizeMap[size]:buttonSizeToIconSizeMap[size],spinnerSize:buttonSizeToSpinnerSizeMap[size],fontSize:buttonTypographyTokens.fonts.size[size],lineHeight:buttonTypographyTokens.lineHeights[size],minHeight:makeSize(minHeight[size]),iconPadding:hasIcon&&children!=null&&children.trim()?"spacing."+textPadding[size]:undefined,iconColor:getColorToken$1({property:'icon',variant:variant,contrast:contrast,intent:intent,state:'default'}),textColor:getColorToken$1({property:'text',variant:variant,contrast:contrast,intent:intent,state:'default'}),buttonPaddingTop:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].top]):makeSpace(theme.spacing[buttonPadding[size].top]),buttonPaddingBottom:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].bottom]):makeSpace(theme.spacing[buttonPadding[size].bottom]),buttonPaddingLeft:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].left]):makeSpace(theme.spacing[buttonPadding[size].left]),buttonPaddingRight:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].right]):makeSpace(theme.spacing[buttonPadding[size].right]),text:size==='xsmall'?children==null?void 0:children.trim().toUpperCase():children==null?void 0:children.trim(),defaultBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'default'})),defaultBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'default'})),hoverBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'hover'})),hoverBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'hover'})),activeBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'active'})),activeBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'active'})),focusBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'focus'})),focusBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'focus'})),focusRingColor:get_1(theme.colors,'brand.primary.400'),borderWidth:makeBorderSize(theme.border.width.thin),borderRadius:makeBorderSize(theme.border.radius.small),motionDuration:'duration.xquick',motionEasing:'easing.standard.effective'};if(isDisabled){var disabledBackgroundColor=get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'disabled'}));var disabledBorderColor=get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'disabled'}));props.iconColor=getColorToken$1({property:'icon',variant:variant,contrast:contrast,intent:intent,state:'disabled'});props.textColor=getColorToken$1({property:'text',variant:variant,contrast:contrast,intent:intent,state:'disabled'});props.defaultBackgroundColor=disabledBackgroundColor;props.defaultBorderColor=disabledBorderColor;props.hoverBackgroundColor=disabledBackgroundColor;props.hoverBorderColor=disabledBorderColor;props.activeBackgroundColor=disabledBackgroundColor;props.activeBorderColor=disabledBorderColor;props.focusBackgroundColor=disabledBackgroundColor;props.focusBorderColor=disabledBorderColor;}return props;};var ButtonContent=styled(Box)(function(_ref3){var isHidden=_ref3.isHidden;return {opacity:isHidden?0:1};});var BaseButton=function BaseButton(_ref4){var _ref4$variant=_ref4.variant,variant=_ref4$variant===void 0?'primary':_ref4$variant,intent=_ref4.intent,_ref4$contrast=_ref4.contrast,contrast=_ref4$contrast===void 0?'low':_ref4$contrast,_ref4$size=_ref4.size,size=_ref4$size===void 0?'medium':_ref4$size,Icon=_ref4.icon,_ref4$iconPosition=_ref4.iconPosition,iconPosition=_ref4$iconPosition===void 0?'left':_ref4$iconPosition,_ref4$isDisabled=_ref4.isDisabled,isDisabled=_ref4$isDisabled===void 0?false:_ref4$isDisabled,_ref4$isFullWidth=_ref4.isFullWidth,isFullWidth=_ref4$isFullWidth===void 0?false:_ref4$isFullWidth,_ref4$isLoading=_ref4.isLoading,isLoading=_ref4$isLoading===void 0?false:_ref4$isLoading,onClick=_ref4.onClick,_ref4$type=_ref4.type,type=_ref4$type===void 0?'button':_ref4$type,children=_ref4.children,accessibilityLabel=_ref4.accessibilityLabel;var disabled=isLoading||isDisabled;var _useTheme=useTheme(),theme=_useTheme.theme;if(!Icon&&!(children!=null&&children.trim())){throw new Error("[Blade: BaseButton]: At least one of icon or text is required to render a button.");}var prevLoading=usePrevious(isLoading);useEffect(function(){if(isLoading)announce('Started loading');if(!isLoading&&prevLoading)announce('Stopped loading');},[isLoading,prevLoading]);var _getProps=getProps$1({buttonTypographyTokens:typography,children:children,isDisabled:disabled,size:size,variant:variant,theme:theme,intent:intent,contrast:contrast,hasIcon:Boolean(Icon)}),activeBorderColor=_getProps.activeBorderColor,activeBackgroundColor=_getProps.activeBackgroundColor,defaultBorderColor=_getProps.defaultBorderColor,defaultBackgroundColor=_getProps.defaultBackgroundColor,minHeight=_getProps.minHeight,buttonPaddingTop=_getProps.buttonPaddingTop,buttonPaddingBottom=_getProps.buttonPaddingBottom,buttonPaddingLeft=_getProps.buttonPaddingLeft,buttonPaddingRight=_getProps.buttonPaddingRight,focusBorderColor=_getProps.focusBorderColor,focusBackgroundColor=_getProps.focusBackgroundColor,focusRingColor=_getProps.focusRingColor,fontSize=_getProps.fontSize,hoverBorderColor=_getProps.hoverBorderColor,hoverBackgroundColor=_getProps.hoverBackgroundColor,iconColor=_getProps.iconColor,iconSize=_getProps.iconSize,iconPadding=_getProps.iconPadding,spinnerSize=_getProps.spinnerSize,lineHeight=_getProps.lineHeight,text=_getProps.text,textColor=_getProps.textColor,borderWidth=_getProps.borderWidth,borderRadius=_getProps.borderRadius,motionDuration=_getProps.motionDuration,motionEasing=_getProps.motionEasing;return jsxs(StyledBaseButton,{accessibilityProps:_extends({},makeAccessible({role:'button',label:accessibilityLabel})),isLoading:isLoading,disabled:disabled,activeBorderColor:activeBorderColor,activeBackgroundColor:activeBackgroundColor,defaultBorderColor:defaultBorderColor,minHeight:minHeight,buttonPaddingTop:buttonPaddingTop,buttonPaddingBottom:buttonPaddingBottom,buttonPaddingLeft:buttonPaddingLeft,buttonPaddingRight:buttonPaddingRight,defaultBackgroundColor:defaultBackgroundColor,focusBorderColor:focusBorderColor,focusBackgroundColor:focusBackgroundColor,focusRingColor:focusRingColor,hoverBorderColor:hoverBorderColor,hoverBackgroundColor:hoverBackgroundColor,isFullWidth:isFullWidth,onClick:onClick,type:type,borderWidth:borderWidth,borderRadius:borderRadius,motionDuration:motionDuration,motionEasing:motionEasing,children:[isLoading?jsx(Box,{display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",top:0,left:0,bottom:0,right:0,children:jsx(BaseSpinner,{accessibilityLabel:"Loading",size:spinnerSize,intent:intent,contrast:contrast})}):null,jsxs(ButtonContent,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",flex:1,isHidden:isLoading,children:[Icon&&iconPosition=='left'?jsx(Box,{paddingRight:iconPadding,display:"flex",justifyContent:"center",alignItems:"center",children:jsx(Icon,{size:iconSize,color:iconColor})}):null,text?jsx(BaseText,{lineHeight:lineHeight,fontSize:fontSize,fontWeight:"bold",textAlign:"center",color:textColor,children:text}):null,Icon&&iconPosition=='right'?jsx(Box,{paddingLeft:iconPadding,display:"flex",justifyContent:"center",alignItems:"center",children:jsx(Icon,{size:iconSize,color:iconColor})}):null]})]});};
 
 var getStyledLinkStyles=function getStyledLinkStyles(_ref){var cursor=_ref.cursor;return {padding:0,backgroundColor:'transparent',outline:'none',textDecoration:'none',border:'none',cursor:cursor};};
 
@@ -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 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,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,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 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 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: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 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`.
@@ -3431,7 +3437,7 @@ var SelectorSupportText=function SelectorSupportText(_ref){var children=_ref.chi
 
 var SelectorInput=function SelectorInput(_props){return jsx(Fragment$1,{});};
 
-var Checkbox=function Checkbox(_ref){var _groupProps$state,_groupProps$size;var defaultChecked=_ref.defaultChecked,validationState=_ref.validationState,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isIndeterminate=_ref.isIndeterminate,isRequired=_ref.isRequired,name=_ref.name,onChange=_ref.onChange,value=_ref.value,children=_ref.children,helpText=_ref.helpText,errorText=_ref.errorText,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var groupProps=useCheckboxGroupContext();var hasValidationState=!isUndefined_1(validationState);var hasName=!isUndefined_1(name);var hasDefaultChecked=!isUndefined_1(defaultChecked);var hasIsChecked=!isUndefined_1(isChecked);var hasOnChange=!isUndefined_1(onChange);if((hasValidationState||hasName||hasDefaultChecked||hasIsChecked||hasOnChange)&&!isEmpty_1(groupProps)){var props=[hasValidationState?'validationState':undefined,hasName?'name':undefined,hasDefaultChecked?'defaultChecked':undefined,hasIsChecked?'isChecked':undefined,hasOnChange?'onChange':undefined].filter(Boolean).join(',');throw new Error("[Blade Checkbox]: Cannot set `"+props+"` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself");}if(!value&&!isEmpty_1(groupProps)){throw new Error("[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique \"value\" prop to each <Checkbox />\n      <CheckboxGroup>\n        <Checkbox value=\"apple\">Apple</Checkbox>\n        <Checkbox value=\"mango\">Mango</Checkbox>\n      </CheckboxGroup>\n      ");}var _validationState=validationState!=null?validationState:groupProps==null?void 0:groupProps.validationState;var _hasError=_validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _name=name!=null?name:groupProps==null?void 0:groupProps.name;var _isChecked=isChecked!=null?isChecked:groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var isSmall=_size==='small';var showSupportingText=validationState!=='error'&&helpText;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,event=_ref2.event,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}onChange==null?void 0:onChange({isChecked:isChecked,event:event,value:value});};var _useCheckbox=useCheckbox({defaultChecked:defaultChecked,isChecked:_isChecked,isIndeterminate:isIndeterminate,hasError:_hasError,hasHelperText:Boolean(showSupportingText),isDisabled:_isDisabled,isRequired:isRequired,name:_name,value:value,onChange:handleChange}),state=_useCheckbox.state,ids=_useCheckbox.ids,inputProps=_useCheckbox.inputProps;return jsxs(Box,{children:[jsx(SelectorLabel,{inputProps:state.isReactNative?inputProps:{},children:jsxs(Box,{display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{isChecked:state.isChecked||Boolean(isIndeterminate),isDisabled:_isDisabled,isNegative:_hasError,inputProps:inputProps}),jsx(CheckboxIcon,{size:_size,isChecked:state.isChecked,isIndeterminate:isIndeterminate,isDisabled:_isDisabled,isNegative:_hasError}),jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children})]}),jsx(Box,{marginLeft:isSmall?'spacing.6':'spacing.7',children:showSupportingText&&jsx(SelectorSupportText,{id:ids==null?void 0:ids.helpTextId,children:helpText})})]})}),jsx(FormHint,{errorText:errorText,errorTextId:ids==null?void 0:ids.errorTextId,type:validationState==='error'?'error':'help'})]});};
+var Checkbox=function Checkbox(_ref){var _groupProps$state,_groupProps$size;var defaultChecked=_ref.defaultChecked,validationState=_ref.validationState,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isIndeterminate=_ref.isIndeterminate,isRequired=_ref.isRequired,name=_ref.name,onChange=_ref.onChange,value=_ref.value,children=_ref.children,helpText=_ref.helpText,errorText=_ref.errorText,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var groupProps=useCheckboxGroupContext();var hasValidationState=!isUndefined_1(validationState);var hasName=!isUndefined_1(name);var hasDefaultChecked=!isUndefined_1(defaultChecked);var hasIsChecked=!isUndefined_1(isChecked);var hasOnChange=!isUndefined_1(onChange);if((hasValidationState||hasName||hasDefaultChecked||hasIsChecked||hasOnChange)&&!isEmpty_1(groupProps)){var props=[hasValidationState?'validationState':undefined,hasName?'name':undefined,hasDefaultChecked?'defaultChecked':undefined,hasIsChecked?'isChecked':undefined,hasOnChange?'onChange':undefined].filter(Boolean).join(',');throw new Error("[Blade Checkbox]: Cannot set `"+props+"` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself");}if(!value&&!isEmpty_1(groupProps)){throw new Error("[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique \"value\" prop to each <Checkbox />\n      <CheckboxGroup>\n        <Checkbox value=\"apple\">Apple</Checkbox>\n        <Checkbox value=\"mango\">Mango</Checkbox>\n      </CheckboxGroup>\n      ");}var _validationState=validationState!=null?validationState:groupProps==null?void 0:groupProps.validationState;var _hasError=_validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _name=name!=null?name:groupProps==null?void 0:groupProps.name;var _isChecked=isChecked!=null?isChecked:groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var isSmall=_size==='small';var showSupportingText=validationState!=='error'&&helpText;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,event=_ref2.event,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}onChange==null?void 0:onChange({isChecked:isChecked,event:event,value:value});};var _useCheckbox=useCheckbox({defaultChecked:defaultChecked,isChecked:_isChecked,isIndeterminate:isIndeterminate,hasError:_hasError,hasHelperText:Boolean(showSupportingText),isDisabled:_isDisabled,isRequired:isRequired,name:_name,value:value,onChange:handleChange}),state=_useCheckbox.state,ids=_useCheckbox.ids,inputProps=_useCheckbox.inputProps;return jsxs(Box,{children:[jsx(SelectorLabel,{inputProps:state.isReactNative?inputProps:{},children:jsxs(Box,{display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{isChecked:state.isChecked||Boolean(isIndeterminate),isDisabled:_isDisabled,hasError:_hasError,inputProps:inputProps}),jsx(CheckboxIcon,{size:_size,isChecked:state.isChecked,isIndeterminate:isIndeterminate,isDisabled:_isDisabled,isNegative:_hasError}),jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children})]}),jsx(Box,{marginLeft:isSmall?'spacing.6':'spacing.7',children:showSupportingText&&jsx(SelectorSupportText,{id:ids==null?void 0:ids.helpTextId,children:helpText})})]})}),jsx(FormHint,{errorText:errorText,errorTextId:ids==null?void 0:ids.errorTextId,type:validationState==='error'?'error':'help'})]});};
 
 var useCheckboxGroup=function useCheckboxGroup(_ref){var value=_ref.value,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,labelPosition=_ref.labelPosition,_onChange=_ref.onChange,validationState=_ref.validationState,name=_ref.name,size=_ref.size;var _useTheme=useTheme(),platform=_useTheme.platform;var _useFormId=useFormId('checkbox-group'),labelId=_useFormId.labelId;var _useControllableState=useControllableState({value:value,defaultValue:defaultValue||[],onChange:function onChange(values){return _onChange==null?void 0:_onChange({values:values,name:name});}}),_useControllableState2=_slicedToArray(_useControllableState,2),checkedValues=_useControllableState2[0],setValue=_useControllableState2[1];var state=React__default.useMemo(function(){return {value:checkedValues,setValue:function(_setValue){function setValue(_x){return _setValue.apply(this,arguments);}setValue.toString=function(){return _setValue.toString();};return setValue;}(function(value){if(isDisabled){return;}setValue(function(){return value;});}),isChecked:function isChecked(value){return checkedValues.includes(value);},addValue:function addValue(value){if(isDisabled){return;}if(!checkedValues.includes(value)){setValue(function(){return checkedValues.concat(value);});}},removeValue:function removeValue(value){if(isDisabled){return;}if(checkedValues.includes(value)){setValue(function(){return checkedValues.filter(function(existingValue){return existingValue!==value;});});}}};},[checkedValues,isDisabled,setValue]);var contextValue=React__default.useMemo(function(){return {validationState:validationState,isDisabled:isDisabled,labelPosition:platform==='onMobile'?'top':labelPosition,name:name,state:state,size:size};},[validationState,isDisabled,platform,labelPosition,name,state,size]);return {state:state,contextValue:contextValue,ids:{labelId:labelId}};};
 
@@ -3483,7 +3489,7 @@ var CheckedIcon=function CheckedIcon(_ref){var color=_ref.color,size=_ref.size;v
 
 var RadioGroupContext=React__default.createContext({});var RadioGroupProvider=RadioGroupContext.Provider;var useRadioGroupContext=function useRadioGroupContext(){var context=React__default.useContext(RadioGroupContext);return context;};
 
-var Radio=function Radio(_ref){var _groupProps$state,_groupProps$size;var value=_ref.value,children=_ref.children,helpText=_ref.helpText,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var groupProps=useRadioGroupContext();var isInsideGroup=!isEmpty_1(groupProps);if(!isInsideGroup){throw new Error('[Blade Radio]: Cannot use <Radio /> outside of <RadioGroup />');}var isChecked=groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var defaultChecked=(groupProps==null?void 0:groupProps.defaultValue)===undefined?undefined:(groupProps==null?void 0:groupProps.defaultValue)===value;var validationState=groupProps==null?void 0:groupProps.validationState;var hasError=validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var name=groupProps==null?void 0:groupProps.name;var showHelpText=!hasError&&helpText;var isReactNative=getPlatformType()==='react-native';var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var isSmall=_size==='small';var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.setValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue();}};var _useRadio=useRadio({defaultChecked:defaultChecked,isChecked:isChecked,hasError:hasError,isDisabled:_isDisabled,isRequired:groupProps.necessityIndicator==='required',name:name,value:value,onChange:handleChange}),state=_useRadio.state,ids=_useRadio.ids,inputProps=_useRadio.inputProps;return jsx(SelectorLabel,{inputProps:isReactNative?inputProps:{},children:jsxs(Box,{display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{isChecked:state.isChecked,isDisabled:_isDisabled,isNegative:hasError,inputProps:inputProps}),jsx(RadioIcon,{size:_size,isChecked:state.isChecked,isDisabled:_isDisabled,isNegative:hasError}),jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children})]}),jsx(Box,{marginLeft:isSmall?'spacing.6':'spacing.7',children:showHelpText&&jsx(SelectorSupportText,{id:ids==null?void 0:ids.helpTextId,children:helpText})})]})});};
+var Radio=function Radio(_ref){var _groupProps$state,_groupProps$size;var value=_ref.value,children=_ref.children,helpText=_ref.helpText,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var groupProps=useRadioGroupContext();var isInsideGroup=!isEmpty_1(groupProps);if(!isInsideGroup){throw new Error('[Blade Radio]: Cannot use <Radio /> outside of <RadioGroup />');}var isChecked=groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var defaultChecked=(groupProps==null?void 0:groupProps.defaultValue)===undefined?undefined:(groupProps==null?void 0:groupProps.defaultValue)===value;var validationState=groupProps==null?void 0:groupProps.validationState;var hasError=validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var name=groupProps==null?void 0:groupProps.name;var showHelpText=!hasError&&helpText;var isReactNative=getPlatformType()==='react-native';var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var isSmall=_size==='small';var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.setValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue();}};var _useRadio=useRadio({defaultChecked:defaultChecked,isChecked:isChecked,hasError:hasError,isDisabled:_isDisabled,isRequired:groupProps.necessityIndicator==='required',name:name,value:value,onChange:handleChange}),state=_useRadio.state,ids=_useRadio.ids,inputProps=_useRadio.inputProps;return jsx(SelectorLabel,{inputProps:isReactNative?inputProps:{},children:jsxs(Box,{display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{isChecked:state.isChecked,isDisabled:_isDisabled,hasError:hasError,inputProps:inputProps}),jsx(RadioIcon,{size:_size,isChecked:state.isChecked,isDisabled:_isDisabled,isNegative:hasError}),jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children})]}),jsx(Box,{marginLeft:isSmall?'spacing.6':'spacing.7',children:showHelpText&&jsx(SelectorSupportText,{id:ids==null?void 0:ids.helpTextId,children:helpText})})]})});};
 
 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}};};