@razorpay/blade 3.4.0 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @razorpay/blade
 
+## 3.5.0
+
+### Minor Changes
+
+- 8dc131d: feat(blade): added `small` variant in Checkbox/Radio
+
+## 3.4.2
+
+### Patch Changes
+
+- 48c36af: feat: add README to npm
+
+## 3.4.1
+
+### Patch Changes
+
+- 49894f2: feat: adding Link icon
+
 ## 3.4.0
 
 ### Minor Changes

package/README.md

@@ -0,0 +1,39 @@
+<h1 align="center">
+  Blade
+</h1>
+<p align="center">
+  <a href="https://github.com/styled-components/styled-components">
+    <img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e" alt="Blade is styled with styled-components" />
+  </a>
+  <a href="https://github.com/facebook/jest">
+    <img src="https://jestjs.io/img/jest-badge.svg" alt="Blade is tested with jest" />
+  </a>
+  <a href="https://github.com/razorpay/blade/blob/master/LICENSE.md">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Blade is released under the MIT license." />
+  </a>
+</p>
+
+<p align="center">
+   The Design System that powers Razorpay
+<p align="center">
+
+### [`@razorpay/blade`](https://github.com/razorpay/blade/tree/master/packages/blade)
+
+This package is under active development.
+
+- [Documentation](https://master--61c19ee8d3d282003ac1d81c.chromatic.com)
+- [Installation Guide](https://master--61c19ee8d3d282003ac1d81c.chromatic.com/?path=/docs/guides-installation--page)
+- [Contributing guidelines](https://github.com/razorpay/blade/blob/master/CONTRIBUTING.md)
+
+---
+
+> **Note**
+>
+> The blade-old package has been moved to it's own repo.
+> [github.com/razorpay/blade-old](https://github.com/razorpay/blade-old) (Only accessible to Razorpay employees)
+>
+> It is under **maintenance** and it won't have any major releases.
+
+## 📝 License
+
+Licensed under the [MIT License](https://github.com/razorpay/blade/blob/master/LICENSE.md).

package/build/components/index.d.ts

@@ -24,6 +24,8 @@ type BorderWidth = Readonly<{
   none: 0;
   /** thin: 1(px/rem/pt) */
   thin: 1;
+  /** thick: 1.5(px/rem/pt) */
+  thick: 1.5;
 }>;
 
 type Border = Readonly<{
@@ -1139,8 +1141,14 @@ declare type CheckboxProps = {
      * and `invalid` attribute will be added
      */
     validationState?: 'error' | 'none';
+    /**
+     * Size of the checkbox
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
 };
-declare const Checkbox: ({ defaultChecked, validationState, isChecked, isDisabled, isIndeterminate, isRequired, name, onChange, value, children, helpText, errorText, }: CheckboxProps) => React__default.ReactElement;
+declare const Checkbox: ({ defaultChecked, validationState, isChecked, isDisabled, isIndeterminate, isRequired, name, onChange, value, children, helpText, errorText, size, }: CheckboxProps) => React__default.ReactElement;
 
 declare type CheckboxGroupProps = {
     /**
@@ -1209,8 +1217,14 @@ declare type CheckboxGroupProps = {
      * (Useful for form submission).
      */
     name?: string;
+    /**
+     * Size of the checkbox
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
 };
-declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, }: CheckboxGroupProps) => React__default.ReactElement;
+declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, }: CheckboxGroupProps) => React__default.ReactElement;
 
 declare const ArrowDownIcon: IconComponent;
 
@@ -1252,6 +1266,8 @@ declare const HomeIcon: IconComponent;
 
 declare const InfoIcon: ({ size, color }: IconProps) => ReactElement;
 
+declare const LinkIcon: IconComponent;
+
 declare const PauseIcon: ({ size, color }: IconProps) => ReactElement;
 
 declare const PlusIcon: ({ size, color }: IconProps) => ReactElement;
@@ -1688,8 +1704,14 @@ declare type RadioProps = {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Size of the radios
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
 };
-declare const Radio: ({ value, children, helpText, isDisabled }: RadioProps) => React__default.ReactElement;
+declare const Radio: ({ value, children, helpText, isDisabled, size, }: RadioProps) => React__default.ReactElement;
 
 declare type RadioGroupProps = {
     /**
@@ -1758,8 +1780,14 @@ declare type RadioGroupProps = {
      * (Useful for form submission).
      */
     name?: string;
+    /**
+     * Size of the radios
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
 };
-declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, }: RadioGroupProps) => React__default.ReactElement;
+declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, }: RadioGroupProps) => React__default.ReactElement;
 
 declare type SpinnerProps = {
     /**
@@ -1956,4 +1984,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };

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

@@ -24,6 +24,8 @@ type BorderWidth = Readonly<{
   none: 0;
   /** thin: 1(px/rem/pt) */
   thin: 1;
+  /** thick: 1.5(px/rem/pt) */
+  thick: 1.5;
 }>;
 
 type Border = Readonly<{
@@ -1139,8 +1141,14 @@ declare type CheckboxProps = {
      * and `invalid` attribute will be added
      */
     validationState?: 'error' | 'none';
+    /**
+     * Size of the checkbox
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
 };
-declare const Checkbox: ({ defaultChecked, validationState, isChecked, isDisabled, isIndeterminate, isRequired, name, onChange, value, children, helpText, errorText, }: CheckboxProps) => React__default.ReactElement;
+declare const Checkbox: ({ defaultChecked, validationState, isChecked, isDisabled, isIndeterminate, isRequired, name, onChange, value, children, helpText, errorText, size, }: CheckboxProps) => React__default.ReactElement;
 
 declare type CheckboxGroupProps = {
     /**
@@ -1209,8 +1217,14 @@ declare type CheckboxGroupProps = {
      * (Useful for form submission).
      */
     name?: string;
+    /**
+     * Size of the checkbox
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
 };
-declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, }: CheckboxGroupProps) => React__default.ReactElement;
+declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, }: CheckboxGroupProps) => React__default.ReactElement;
 
 declare const ArrowDownIcon: IconComponent;
 
@@ -1252,6 +1266,8 @@ declare const HomeIcon: IconComponent;
 
 declare const InfoIcon: ({ size, color }: IconProps) => ReactElement;
 
+declare const LinkIcon: IconComponent;
+
 declare const PauseIcon: ({ size, color }: IconProps) => ReactElement;
 
 declare const PlusIcon: ({ size, color }: IconProps) => ReactElement;
@@ -1679,8 +1695,14 @@ declare type RadioProps = {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Size of the radios
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
 };
-declare const Radio: ({ value, children, helpText, isDisabled }: RadioProps) => React__default.ReactElement;
+declare const Radio: ({ value, children, helpText, isDisabled, size, }: RadioProps) => React__default.ReactElement;
 
 declare type RadioGroupProps = {
     /**
@@ -1749,8 +1771,14 @@ declare type RadioGroupProps = {
      * (Useful for form submission).
      */
     name?: string;
+    /**
+     * Size of the radios
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
 };
-declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, }: RadioGroupProps) => React__default.ReactElement;
+declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, }: RadioGroupProps) => React__default.ReactElement;
 
 declare type SpinnerProps = {
     /**
@@ -1944,4 +1972,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };

package/build/components/index.native.js

@@ -3275,6 +3275,8 @@ var HomeIcon=function HomeIcon(_ref){var size=_ref.size,color=_ref.color;var _us
 
 var InfoIcon=function InfoIcon(_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 jsxs(Svg,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",children:[jsx(Path,{d:"M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z",fill:iconColor}),jsx(Path,{d:"M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z",fill:iconColor}),jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z",fill:iconColor})]});};
 
+var LinkIcon=function LinkIcon(_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 jsxs(Svg,{height:height,width:width,viewBox:"0 0 22 22",fill:"none",children:[jsx(Path,{d:"M20.1863 1.82377C17.8719 -0.490636 14.1296 -0.523155 11.7753 1.75068L11.765 1.7608L10.045 3.4708C9.65336 3.86019 9.65151 4.49335 10.0409 4.88501C10.4303 5.27667 11.0634 5.27852 11.4551 4.88913L13.1697 3.18451C14.7395 1.67341 17.2307 1.69666 18.772 3.23798C20.313 4.77898 20.3366 7.26948 18.8265 8.83934L15.833 11.8329C15.0124 12.6537 13.8758 13.0778 12.7181 12.9949C11.5605 12.9119 10.496 12.3303 9.80083 11.401C9.47002 10.9587 8.84333 10.8684 8.40108 11.1992C7.95883 11.53 7.86849 12.1567 8.1993 12.5989C9.24204 13.993 10.8388 14.8654 12.5753 14.9897C14.3117 15.1141 16.0165 14.4782 17.2473 13.2469L20.2472 10.2471L20.2593 10.2347C22.5332 7.8804 22.5007 4.13817 20.1863 1.82377Z",fill:iconColor}),jsx(Path,{d:"M9.42474 7.01016C7.68837 6.8858 5.9836 7.52171 4.75285 8.75283L1.75285 11.7528L1.74067 11.7652C-0.533165 14.1195 -0.500646 17.8617 1.81376 20.1761C4.12816 22.4905 7.8704 22.5231 10.2247 20.2492L10.2371 20.237L11.9471 18.527C12.3376 18.1365 12.3376 17.5034 11.9471 17.1128C11.5565 16.7223 10.9234 16.7223 10.5329 17.1128L8.82933 18.8164C7.25947 20.3265 4.76897 20.3029 3.22797 18.7619C1.68697 17.2209 1.66341 14.7304 3.17354 13.1606L6.16719 10.1669C6.9877 9.34611 8.12425 8.92214 9.28187 9.00505C10.4395 9.08796 11.504 9.66956 12.1992 10.5989C12.53 11.0412 13.1567 11.1315 13.5989 10.8007C14.0412 10.4699 14.1315 9.84321 13.8007 9.40096C12.758 8.00693 11.1612 7.13452 9.42474 7.01016Z",fill:iconColor})]});};
+
 var PauseIcon=function PauseIcon(_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,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M6 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H6Zm1 16V5h2v14H7ZM14 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-4Zm1 16V5h2v14h-2Z",fill:iconColor})});};
 
 var PlusIcon=function PlusIcon(_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,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",children:jsx(Path,{d:"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z",fill:iconColor})});};
@@ -3389,13 +3391,15 @@ var isUndefined_1 = isUndefined;
 
 var CheckboxGroupContext=React__default.createContext({});var CheckboxGroupProvider=CheckboxGroupContext.Provider;var useCheckboxGroupContext=function useCheckboxGroupContext(){var context=React__default.useContext(CheckboxGroupContext);return context;};
 
-var variants$2={default:{border:{checked:'colors.brand.primary.500',unchecked:'colors.brand.gray.400'},background:{checked:'colors.brand.primary.500',unchecked:'colors.brand.gray.200'}},disabled:{border:{checked:'colors.brand.gray.300',unchecked:'colors.brand.gray.300'},background:{checked:'colors.brand.gray.300',unchecked:'colors.brand.gray.300'}},negative:{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'}}};var getCheckboxIconWrapperStyles=function getCheckboxIconWrapperStyles(_ref){var theme=_ref.theme,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isNegative=_ref.isNegative;var variant='default';if(isDisabled)variant='disabled';if(isNegative)variant='negative';var checked=isChecked?'checked':'unchecked';var backgroundColor=variants$2[variant].background[checked];var borderColor=variants$2[variant].border[checked];return {display:'flex',alignItems:'center',justifyContent:'center',width:'16px',height:'16px',borderWidth:makeBorderSize(theme.border.width.thin),borderStyle:'solid',margin:makeSpace(theme.spacing[0]),borderRadius:makeSize(theme.border.radius.small),marginRight:makeSpace(theme.spacing[3]),backgroundColor:get_1(theme,backgroundColor),borderColor:get_1(theme,borderColor)};};
+var checkboxSizes={group:{gap:{small:{mobile:'spacing.2',desktop:'spacing.0'},medium:{mobile:'spacing.3',desktop:'spacing.2'}}},icon:{small:{width:12,height:12},medium:{width:16,height:16}}};var checkboxIconColors={variants:{default:{border:{checked:'colors.brand.primary.500',unchecked:'colors.brand.gray.500'},background:{checked:'colors.brand.primary.500',unchecked:'transparent'}},disabled:{border:{checked:'transparent',unchecked:'colors.brand.gray.a100'},background:{checked:'colors.brand.gray.a100',unchecked:'transparent'}},negative:{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'}}}};
+
+var getCheckboxIconWrapperStyles=function getCheckboxIconWrapperStyles(_ref){var theme=_ref.theme,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isNegative=_ref.isNegative,size=_ref.size;var variant='default';if(isDisabled)variant='disabled';if(isNegative)variant='negative';var checked=isChecked?'checked':'unchecked';var background=checkboxIconColors.variants[variant].background[checked];var border=checkboxIconColors.variants[variant].border[checked];var backgroundColor=background==='transparent'?background:get_1(theme,background);var borderColor=border==='transparent'?border:get_1(theme,border);return {display:'flex',alignItems:'center',justifyContent:'center',width:makeSpace(checkboxSizes.icon[size].width),height:makeSpace(checkboxSizes.icon[size].height),borderWidth:makeBorderSize(theme.border.width.thick),borderStyle:'solid',margin:makeSpace(theme.spacing[1]),borderRadius:makeSize(theme.border.radius.small),backgroundColor:backgroundColor,borderColor:borderColor};};
 
 var CheckboxIconWrapper=styled.View(function(props){return getCheckboxIconWrapperStyles(props);});
 
 var StyledFade$1=styled(Animated.View)(function(_ref){var styles=_ref.styles;return _extends({},styles);});var Fade$1=function Fade(_ref2){var children=_ref2.children,show=_ref2.show,styles=_ref2.styles;var _useTheme=useTheme(),theme=_useTheme.theme;var fadeInEasing=theme.motion.easing.entrance.effective;var fadeOutEasing=theme.motion.easing.exit.effective;var fadeIn=new Keyframe({from:{transform:[{scale:0.6}],opacity:0,easing:fadeInEasing},to:{transform:[{scale:1}],opacity:1,easing:fadeInEasing}}).duration(theme.motion.duration.quick);var fadeOut=new Keyframe({from:{transform:[{scale:1}],opacity:1,easing:fadeOutEasing},to:{transform:[{scale:0.6}],opacity:0,easing:fadeOutEasing}}).duration(theme.motion.duration.quick);return show?jsx(StyledFade$1,{styles:styles,entering:fadeIn,exiting:fadeOut,children:children}):null;};
 
-var CheckedIcon$1=function CheckedIcon(_ref){var color=_ref.color;return jsx(Svg,{width:"16px",height:"16px",viewBox:"0 0 16 16",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M12.3536 4.64645C12.5488 4.84171 12.5488 5.15829 12.3536 5.35355L6.85355 10.8536C6.65829 11.0488 6.34171 11.0488 6.14645 10.8536L3.64645 8.35355C3.45118 8.15829 3.45118 7.84171 3.64645 7.64645C3.84171 7.45118 4.15829 7.45118 4.35355 7.64645L6.5 9.79289L11.6464 4.64645C11.8417 4.45118 12.1583 4.45118 12.3536 4.64645Z",fill:color})});};var IndeterminateIcon=function IndeterminateIcon(_ref2){var color=_ref2.color;return jsx(Svg,{width:"16px",height:"16px",viewBox:"0 0 16 16",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8Z",fill:color})});};var CheckboxIcon=function CheckboxIcon(_ref3){var isChecked=_ref3.isChecked,isIndeterminate=_ref3.isIndeterminate,isDisabled=_ref3.isDisabled,isNegative=_ref3.isNegative;var _useTheme=useTheme(),theme=_useTheme.theme;var defaultIconColor=get_1(theme,'colors.brand.gray.200');var disabledIconColor=get_1(theme,'colors.brand.gray.500');var iconColor=isDisabled?disabledIconColor:defaultIconColor;return jsxs(CheckboxIconWrapper,{isIndeterminate:isIndeterminate,isDisabled:isDisabled,isNegative:isNegative,isChecked:!!(isChecked||isIndeterminate),children:[jsx(Fade$1,{show:isIndeterminate,styles:{position:'absolute',display:'flex'},children:jsx(IndeterminateIcon,{color:iconColor})}),jsx(Fade$1,{show:Boolean(isChecked)&&!isIndeterminate,styles:{position:'absolute',display:'flex'},children:isChecked?jsx(CheckedIcon$1,{color:iconColor}):null})]});};
+var svgSize={small:{width:8,height:8},medium:{width:12,height:12}};var CheckedIcon$1=function CheckedIcon(_ref){var color=_ref.color,size=_ref.size;var width=makeSpace(svgSize[size].width);var height=makeSpace(svgSize[size].height);return jsx(Svg,{width:width,height:height,viewBox:"0 0 8 8",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z",fill:color,stroke:"white",strokeWidth:"0.5",strokeLinecap:"round",strokeLinejoin:"round"})});};var IndeterminateIcon=function IndeterminateIcon(_ref2){var color=_ref2.color,size=_ref2.size;var width=svgSize[size].width+"px";var height=svgSize[size].height+"px";return jsx(Svg,{width:width,height:height,viewBox:"0 0 8 8",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z",fill:color,stroke:"white",strokeWidth:"0.5",strokeLinecap:"round",strokeLinejoin:"round"})});};var CheckboxIcon=function CheckboxIcon(_ref3){var isChecked=_ref3.isChecked,isIndeterminate=_ref3.isIndeterminate,isDisabled=_ref3.isDisabled,isNegative=_ref3.isNegative,size=_ref3.size;var _useTheme=useTheme(),theme=_useTheme.theme;var defaultIconColor=get_1(theme,'colors.brand.gray.200');var disabledIconColor=get_1(theme,'colors.brand.gray.500');var iconColor=isDisabled?disabledIconColor:defaultIconColor;return jsxs(CheckboxIconWrapper,{size:size,isIndeterminate:isIndeterminate,isDisabled:isDisabled,isNegative:isNegative,isChecked:!!(isChecked||isIndeterminate),children:[jsx(Fade$1,{show:isIndeterminate,styles:{position:'absolute',display:'flex'},children:jsx(IndeterminateIcon,{size:size,color:iconColor})}),jsx(Fade$1,{show:Boolean(isChecked)&&!isIndeterminate,styles:{position:'absolute',display:'flex'},children:isChecked?jsx(CheckedIcon$1,{size:size,color:iconColor}):null})]});};
 
 function useControllableState(props){var valueProp=props.value,defaultValue=props.defaultValue,onChange=props.onChange;var _React$useState=React.useState(defaultValue),_React$useState2=_slicedToArray(_React$useState,2),valueState=_React$useState2[0],setValue=_React$useState2[1];var _React$useRef=React.useRef(valueProp!==undefined),isControlled=_React$useRef.current;var value=isControlled&&typeof valueProp!=='undefined'?valueProp:valueState;var updateValue=React.useCallback(function(next){var nextValue=next(value);if(!isControlled)setValue(nextValue);onChange==null?void 0:onChange(nextValue);},[onChange,value]);return [value,updateValue];}
 
@@ -3417,21 +3421,21 @@ var StyledVisuallyHidden=styled.View(screenReaderStyles);var VisuallyHidden=func
 
 var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",weight:"regular",type:"placeholder",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(BaseText,{lineHeight:"s",fontFamily:"text",fontStyle:"normal",fontSize:75,fontWeight:"bold",color:"feedback.text.negative.lowContrast",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(Box,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",children:[jsxs(Text,{type:"subdued",variant:"body",size:isLabelLeftPositioned?'medium':'small',weight:"bold",children:[children,computedAccessibilityNode]}),necessityLabel]});if(isReactNative){return jsx(Box,{marginRight:"spacing.5",marginBottom:"spacing.2",children:textNode});}var Component=as;var width=isLabelLeftPositioned&&isDesktop?'120px':'auto';return jsx(Component,{htmlFor:htmlFor,style:{width:width,flexShrink:0,marginRight:makeSpace(theme.spacing[5]),wordBreak:'break-all'},id:id,children:jsx(Box,{marginBottom:isLabelLeftPositioned?'spacing.0':'spacing.2',children:textNode})});};
 
-var StyledSelectorLabel=styled.Pressable({display:'flex',flexDirection:'row',marginTop:makeSpace(2),marginBottom:makeSpace(2)});var SelectorLabel=function SelectorLabel(_ref){var children=_ref.children,inputProps=_ref.inputProps;return jsx(StyledSelectorLabel,_extends({},inputProps,{children:children}));};
+var StyledSelectorLabel=styled.Pressable(function(_ref){var theme=_ref.theme;return {display:'flex',flexDirection:'row',marginTop:makeSpace(theme.spacing[1]),marginBottom:makeSpace(theme.spacing[1])};});var SelectorLabel=function SelectorLabel(_ref2){var children=_ref2.children,inputProps=_ref2.inputProps;return jsx(StyledSelectorLabel,_extends({},inputProps,{children:children}));};
 
-var SelectorTitle=function SelectorTitle(_ref){var children=_ref.children,isDisabled=_ref.isDisabled;return jsx(BaseText,{lineHeight:"l",fontFamily:"text",fontWeight:"regular",color:isDisabled?'surface.text.placeholder.lowContrast':'surface.text.subtle.lowContrast',fontSize:100,children:children});};
+var SelectorTitle=function SelectorTitle(_ref){var children=_ref.children,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var lineHeight={small:'s',medium:'l'};var fontSize={small:75,medium:100};return jsxs(Fragment$1,{children:[jsx(Box,{marginLeft:"spacing.2"}),jsx(BaseText,{lineHeight:lineHeight[size],fontFamily:"text",fontWeight:"regular",fontSize:fontSize[size],color:isDisabled?'surface.text.placeholder.lowContrast':'surface.text.subtle.lowContrast',children:children})]});};
 
 var SelectorSupportText=function SelectorSupportText(_ref){var children=_ref.children,id=_ref.id;var isReactNative=getPlatformType()==='react-native';return jsx(BaseText,{id:id,as:isReactNative?undefined:'span',color:"surface.text.muted.lowContrast",fontSize:50,lineHeight:"s",fontStyle:"italic",fontFamily:"text",children:children});};
 
 var SelectorInput=function SelectorInput(_props){return jsx(Fragment$1,{});};
 
-var Checkbox=function Checkbox(_ref){var _groupProps$state;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;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 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,{isChecked:state.isChecked,isIndeterminate:isIndeterminate,isDisabled:_isDisabled,isNegative:_hasError}),jsx(SelectorTitle,{isDisabled:_isDisabled,children:children})]}),jsx(Box,{marginLeft:"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,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 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;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};},[validationState,isDisabled,platform,labelPosition,name,state]);return {state:state,contextValue:contextValue,ids:{labelId:labelId}};};
+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}};};
 
 var SelectorGroupField=function SelectorGroupField(_ref){var children=_ref.children,labelledBy=_ref.labelledBy,position=_ref.position,_ref$accessibilityRol=_ref.accessibilityRole,accessibilityRole=_ref$accessibilityRol===void 0?'group':_ref$accessibilityRol;var isReactNative=getPlatformType()==='react-native';var labelPosition=position==='top'?'column':'row';if(isReactNative)labelPosition='column';var role=accessibilityRole==='group'&&isReactNative?undefined:accessibilityRole;return jsx(Box,_extends({display:"flex",flexDirection:labelPosition},makeAccessible({role:role,labelledBy:labelledBy}),{children:children}));};
 
-var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,isDisabled=_ref.isDisabled,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value;var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,name:name,labelPosition:labelPosition,validationState:validationState}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=","+(showError?errorText:'')+" "+(showHelpText?helpText:'');return jsx(CheckboxGroupProvider,{value:contextValue,children:jsxs(SelectorGroupField,{position:labelPosition,labelledBy:ids.labelId,children:[jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,children:label}),jsxs(Box,{children:[jsx(Box,{display:"flex",flexDirection:"column",gap:2,children:children}),jsx(FormHint,{errorText:errorText,helpText:helpText,type:validationState==='error'?'error':'help'})]})]})});};
+var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,isDisabled=_ref.isDisabled,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,name:name,labelPosition:labelPosition,validationState:validationState,size:size}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=","+(showError?errorText:'')+" "+(showHelpText?helpText:'');var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var gap=checkboxSizes.group.gap[size][matchedDeviceType];var childCount=React__default.Children.count(children);return jsx(CheckboxGroupProvider,{value:contextValue,children:jsxs(SelectorGroupField,{position:labelPosition,labelledBy:ids.labelId,children:[jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,children:label}),jsxs(Box,{children:[jsx(Box,{display:"flex",flexDirection:"column",children:React__default.Children.map(children,function(child,index){return jsx(Box,{marginBottom:index===childCount-1?0:gap,children:child},index);})}),jsx(FormHint,{errorText:errorText,helpText:helpText,type:validationState==='error'?'error':'help'})]})]})});};
 
 var getVisualContainerStyles=function getVisualContainerStyles(){return {display:'flex',flexDirection:'row',alignItems:'center'};};var getPrefixStyles=function getPrefixStyles(_ref){var hasLeadingIcon=_ref.hasLeadingIcon,hasPrefix=_ref.hasPrefix;if(hasPrefix&&hasLeadingIcon){return {paddingLeft:'spacing.2'};}if(hasPrefix&&!hasLeadingIcon){return {paddingLeft:'spacing.4'};}return {paddingLeft:'spacing.0'};};var getInteractionElementStyles=function getInteractionElementStyles(_ref2){var hasTrailingIcon=_ref2.hasTrailingIcon,hasInteractionElement=_ref2.hasInteractionElement,hasSuffix=_ref2.hasSuffix;if(hasInteractionElement&&(hasSuffix||hasTrailingIcon)){return {paddingRight:'spacing.2'};}if(hasInteractionElement&&!hasSuffix&&!hasTrailingIcon){return {paddingRight:'spacing.4'};}return {paddingRight:'spacing.0'};};var getSuffixStyles=function getSuffixStyles(_ref3){var hasTrailingIcon=_ref3.hasTrailingIcon,hasSuffix=_ref3.hasSuffix;if(hasSuffix&&hasTrailingIcon){return {paddingRight:'spacing.2'};}if(hasSuffix&&!hasTrailingIcon){return {paddingRight:'spacing.4'};}return {paddingRight:'spacing.0'};};var getInputVisualsToBeRendered=function getInputVisualsToBeRendered(_ref4){var leadingIcon=_ref4.leadingIcon,prefix=_ref4.prefix,interactionElement=_ref4.interactionElement,suffix=_ref4.suffix,trailingIcon=_ref4.trailingIcon;return {hasLeadingIcon:Boolean(leadingIcon),hasPrefix:Boolean(prefix),hasInteractionElement:Boolean(interactionElement),hasSuffix:Boolean(suffix),hasTrailingIcon:Boolean(trailingIcon)};};var BaseInputVisuals=function BaseInputVisuals(_ref5){var LeadingIcon=_ref5.leadingIcon,prefix=_ref5.prefix,interactionElement=_ref5.interactionElement,suffix=_ref5.suffix,TrailingIcon=_ref5.trailingIcon,isDisabled=_ref5.isDisabled;var _getInputVisualsToBeR=getInputVisualsToBeRendered({leadingIcon:LeadingIcon,prefix:prefix,interactionElement:interactionElement,suffix:suffix,trailingIcon:TrailingIcon}),hasLeadingIcon=_getInputVisualsToBeR.hasLeadingIcon,hasPrefix=_getInputVisualsToBeR.hasPrefix,hasInteractionElement=_getInputVisualsToBeR.hasInteractionElement,hasSuffix=_getInputVisualsToBeR.hasSuffix,hasTrailingIcon=_getInputVisualsToBeR.hasTrailingIcon;var hasLeadingVisuals=hasLeadingIcon||hasPrefix;var hasTrailingVisuals=hasInteractionElement||hasSuffix||hasTrailingIcon;if(hasLeadingVisuals){return jsxs(Box,_extends({},getVisualContainerStyles(),{children:[LeadingIcon?jsx(Box,{paddingLeft:"spacing.4",display:"flex",children:jsx(LeadingIcon,{size:"medium",color:isDisabled?'surface.text.placeholder.lowContrast':'surface.text.subtle.lowContrast'})}):null,hasPrefix?jsx(Box,_extends({},getPrefixStyles({hasLeadingIcon:hasLeadingIcon,hasPrefix:hasPrefix}),{children:jsx(Text,{size:"medium",variant:"body",weight:"regular",contrast:"low",type:isDisabled?'placeholder':'subtle',children:prefix})})):null]}));}if(hasTrailingVisuals){return jsxs(Box,_extends({},getVisualContainerStyles(),{children:[hasInteractionElement?jsx(Box,_extends({},getInteractionElementStyles({hasTrailingIcon:hasTrailingIcon,hasInteractionElement:hasInteractionElement,hasSuffix:hasSuffix}),{display:"flex",children:interactionElement})):null,hasSuffix?jsx(Box,_extends({},getSuffixStyles({hasTrailingIcon:hasTrailingIcon,hasSuffix:hasSuffix}),{children:jsx(Text,{size:"medium",variant:"body",weight:"regular",contrast:"low",type:isDisabled?'placeholder':'subtle',children:suffix})})):null,TrailingIcon?jsx(Box,{paddingRight:"spacing.4",display:"flex",children:jsx(TrailingIcon,{size:"medium",color:isDisabled?'surface.text.placeholder.lowContrast':'surface.text.subtle.lowContrast'})}):null]}));}return null;};
 
@@ -3461,7 +3465,9 @@ var Link=function Link(_ref){var children=_ref.children,icon=_ref.icon,_ref$icon
 
 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 variants$1={default:{border:{checked:'colors.brand.primary.500',unchecked:'colors.brand.gray.400'},background:{checked:'colors.brand.primary.500',unchecked:'colors.brand.gray.200'}},disabled:{border:{checked:'colors.brand.gray.300',unchecked:'colors.brand.gray.300'},background:{checked:'colors.brand.gray.300',unchecked:'colors.brand.gray.300'}},negative:{border:{checked:'colors.feedback.border.negative.highContrast',unchecked:'colors.feedback.border.negative.highContrast'},background:{checked:'colors.feedback.background.negative.lowContrast',unchecked:'colors.feedback.background.negative.lowContrast'}}};var getRadioIconWrapperStyles=function getRadioIconWrapperStyles(_ref){var theme=_ref.theme,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isNegative=_ref.isNegative;var isReactNative=getPlatformType()==='react-native';var variant='default';if(isDisabled)variant='disabled';if(isNegative)variant='negative';var checked=isChecked?'checked':'unchecked';var backgroundColor=variants$1[variant].background[checked];var borderColor=variants$1[variant].border[checked];return _extends({display:'flex',alignItems:'center',justifyContent:'center',width:'16px',height:'16px',borderWidth:makeBorderSize(theme.border.width.thin),borderStyle:'solid',margin:makeSpace(theme.spacing[0]),borderRadius:makeSize(theme.border.radius.max),marginRight:makeSpace(theme.spacing[3]),backgroundColor:get_1(theme,backgroundColor),borderColor:get_1(theme,borderColor)},!isReactNative&&{transitionDuration:castWebType(makeMotionTime(theme.motion.duration.xquick)),transitionTimingFunction:castWebType(theme.motion.easing.exit.attentive)});};
+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',unchecked:'colors.brand.gray.200'},border:{checked:'colors.brand.primary.500',unchecked:'colors.brand.gray.500'},background:{checked:'colors.brand.primary.500',unchecked:'transparent'}},disabled:{dot:{checked:'colors.brand.gray.200',unchecked:'colors.brand.gray.200'},border:{checked:'transparent',unchecked:'colors.brand.gray.a100'},background:{checked:'colors.brand.gray.a100',unchecked:'transparent'}},negative:{dot:{checked:'colors.brand.gray.200',unchecked:'colors.brand.gray.200'},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'}}}};
+
+var getRadioIconWrapperStyles=function getRadioIconWrapperStyles(_ref){var theme=_ref.theme,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isNegative=_ref.isNegative,size=_ref.size;var isReactNative=getPlatformType()==='react-native';var variant='default';if(isDisabled)variant='disabled';if(isNegative)variant='negative';var checked=isChecked?'checked':'unchecked';var background=radioIconColors.variants[variant].background[checked];var border=radioIconColors.variants[variant].border[checked];var backgroundColor=background==='transparent'?background:get_1(theme,background);var borderColor=border==='transparent'?border:get_1(theme,border);return _extends({display:'flex',alignItems:'center',justifyContent:'center',width:makeSpace(radioSizes.icon[size].width),height:makeSpace(radioSizes.icon[size].height),borderWidth:makeBorderSize(theme.border.width.thick),borderStyle:'solid',margin:makeSpace(theme.spacing[1]),borderRadius:makeSize(theme.border.radius.max),backgroundColor:backgroundColor,borderColor:borderColor},!isReactNative&&{transitionDuration:castWebType(makeMotionTime(theme.motion.duration.xquick)),transitionTimingFunction:castWebType(theme.motion.easing.exit.attentive)});};
 
 var RadioIconWrapper=styled.View(function(props){return getRadioIconWrapperStyles(props);});
 
@@ -3469,19 +3475,19 @@ var StyledFade=styled(Animated.View)(function(_ref){var styles=_ref.styles;retur
 
 var Circle=function Circle(_ref){var cx=_ref.cx,cy=_ref.cy,x=_ref.x,y=_ref.y,r=_ref.r,fill=_ref.fill,stroke=_ref.stroke;return jsx(Circle$1,{cx:cx,cy:cy,x:x,y:y,r:r,fill:fill,stroke:stroke});};
 
-var CheckedIcon=function CheckedIcon(_ref){var color=_ref.color;return jsx(Svg,{width:"16px",height:"16px",viewBox:"0 0 16 16",fill:"none",children:jsx(Circle,{cx:"8",cy:"8",r:"4",fill:color})});};var variants={unchecked:{default:'colors.brand.gray.200',disabled:'colors.brand.gray.300',negative:'colors.feedback.background.negative.lowContrast'},checked:{default:'colors.brand.gray.200',disabled:'colors.brand.gray.400',negative:'colors.feedback.background.negative.highContrast'}};var RadioIcon=function RadioIcon(_ref2){var isChecked=_ref2.isChecked,isDisabled=_ref2.isDisabled,isNegative=_ref2.isNegative;var _useTheme=useTheme(),theme=_useTheme.theme;var checked=Boolean(isChecked);var state=checked?'checked':'unchecked';var variant='default';if(isDisabled)variant='disabled';if(isNegative)variant='negative';var dotColor=get_1(theme,variants[state][variant]);return jsx(RadioIconWrapper,{isDisabled:isDisabled,isNegative:isNegative,isChecked:checked,children:jsx(Fade,{show:checked,styles:{position:'absolute',display:'flex'},children:jsx(CheckedIcon,{color:dotColor})})});};
+var CheckedIcon=function CheckedIcon(_ref){var color=_ref.color,size=_ref.size;var width=radioSizes.icon[size].width;var height=radioSizes.icon[size].height;var radius=radioSizes.icon[size].dotRadius;var viewBox="0 0 "+width+" "+height;var cx=""+width/2;var cy=""+height/2;return jsx(Svg,{width:makeSpace(width),height:makeSpace(height),viewBox:viewBox,fill:"none",children:jsx(Circle,{cx:cx,cy:cy,r:""+radius,fill:color})});};var RadioIcon=function RadioIcon(_ref2){var isChecked=_ref2.isChecked,isDisabled=_ref2.isDisabled,isNegative=_ref2.isNegative,size=_ref2.size;var _useTheme=useTheme(),theme=_useTheme.theme;var checked=Boolean(isChecked);var state=checked?'checked':'unchecked';var variant='default';if(isDisabled)variant='disabled';if(isNegative)variant='negative';var dotColor=get_1(theme,radioIconColors.variants[variant].dot[state]);return jsx(RadioIconWrapper,{size:size,isDisabled:isDisabled,isNegative:isNegative,isChecked:checked,children:jsx(Fade,{show:checked,styles:{position:'absolute',display:'flex'},children:jsx(CheckedIcon,{size:size,color:dotColor})})});};
 
 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;var value=_ref.value,children=_ref.children,helpText=_ref.helpText,isDisabled=_ref.isDisabled;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 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,{isChecked:state.isChecked,isDisabled:_isDisabled,isNegative:hasError}),jsx(SelectorTitle,{children:children})]}),jsx(Box,{marginLeft:"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,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 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;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};},[validationState,isDisabled,platform,labelPosition,state,fallbackName,necessityIndicator]);return {state:state,contextValue:contextValue,ids:{labelId:labelId}};};
+var useRadioGroup=function useRadioGroup(_ref){var value=_ref.value,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,labelPosition=_ref.labelPosition,_onChange=_ref.onChange,validationState=_ref.validationState,necessityIndicator=_ref.necessityIndicator,name=_ref.name,size=_ref.size;var _useTheme=useTheme(),platform=_useTheme.platform;var idBase=useId('radio-group');var labelId=idBase+"-label";var fallbackName=name!=null?name:idBase;var _useControllableState=useControllableState({value:value,defaultValue:defaultValue,onChange:function onChange(v){return _onChange==null?void 0:_onChange({value:v,name:fallbackName});}}),_useControllableState2=_slicedToArray(_useControllableState,2),checkedValue=_useControllableState2[0],setValue=_useControllableState2[1];var state=React__default.useMemo(function(){return {value:checkedValue,setValue:function(_setValue){function setValue(_x){return _setValue.apply(this,arguments);}setValue.toString=function(){return _setValue.toString();};return setValue;}(function(v){if(isDisabled){return;}setValue(function(){return v;});}),removeValue:function removeValue(){if(isDisabled){return;}setValue(undefined);},isChecked:function isChecked(v){if(isUndefined_1(v)||isUndefined_1(checkedValue))return false;return checkedValue===v;}};},[checkedValue,isDisabled,setValue]);var contextValue=React__default.useMemo(function(){return {necessityIndicator:necessityIndicator,validationState:validationState,isDisabled:isDisabled,labelPosition:platform==='onMobile'?'top':labelPosition,name:fallbackName,state:state,size:size};},[validationState,isDisabled,platform,labelPosition,state,fallbackName,necessityIndicator,size]);return {state:state,contextValue:contextValue,ids:{labelId:labelId}};};
 
-var RadioGroup=function RadioGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$validationState=_ref.validationState,validationState=_ref$validationState===void 0?'none':_ref$validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value;var _useRadioGroup=useRadioGroup({defaultValue:defaultValue,isDisabled:isDisabled,labelPosition:labelPosition,name:name,onChange:onChange,validationState:validationState,value:value}),contextValue=_useRadioGroup.contextValue,ids=_useRadioGroup.ids;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=","+(showError?errorText:'')+" "+(showHelpText?helpText:'');var isReactNative=getPlatformType()==='react-native';return jsx(RadioGroupProvider,{value:contextValue,children:jsxs(SelectorGroupField,{position:labelPosition,labelledBy:ids.labelId,accessibilityRole:isReactNative?'radiogroup':'group',children:[jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,children:label}),jsxs(Box,{children:[jsx(Box,{display:"flex",flexDirection:"column",gap:2,children:children}),jsx(FormHint,{type:validationState==='error'?'error':'help',errorText:errorText,helpText:helpText})]})]})});};
+var RadioGroup=function RadioGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$validationState=_ref.validationState,validationState=_ref$validationState===void 0?'none':_ref$validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var _useRadioGroup=useRadioGroup({defaultValue:defaultValue,isDisabled:isDisabled,labelPosition:labelPosition,name:name,onChange:onChange,validationState:validationState,value:value,size:size}),contextValue=_useRadioGroup.contextValue,ids=_useRadioGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=","+(showError?errorText:'')+" "+(showHelpText?helpText:'');var isReactNative=getPlatformType()==='react-native';var gap=radioSizes.group.gap[size][matchedDeviceType];var childCount=React__default.Children.count(children);return jsx(RadioGroupProvider,{value:contextValue,children:jsxs(SelectorGroupField,{position:labelPosition,labelledBy:ids.labelId,accessibilityRole:isReactNative?'radiogroup':'group',children:[jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,children:label}),jsxs(Box,{children:[jsx(Box,{display:"flex",flexDirection:"column",children:React__default.Children.map(children,function(child,index){return jsx(Box,{marginBottom:index===childCount-1?0:gap,children:child},index);})}),jsx(FormHint,{type:validationState==='error'?'error':'help',errorText:errorText,helpText:helpText})]})]})});};
 
 var Spinner=function Spinner(_ref){var _ref2;var label=_ref.label,labelPosition=_ref.labelPosition,accessibilityLabel=_ref.accessibilityLabel,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;return jsx(BaseSpinner,{label:label,labelPosition:labelPosition,accessibilityLabel:(_ref2=accessibilityLabel!=null?accessibilityLabel:label)!=null?_ref2:'Loading',contrast:contrast,size:size});};
 
 var SkipNavLink=function SkipNavLink(_props){throw new Error('[Blade: SkipNav]: SkipNavLink is not available on React Native');};var SkipNavContent=function SkipNavContent(_props){throw new Error('[Blade: SkipNav]: SkipNavContent is not available on React Native');};
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, InfoIcon, Link, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, InfoIcon, Link, LinkIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
 //# sourceMappingURL=index.native.js.map