@razorpay/blade 10.11.0 → 10.12.1

package/build/components/index.d.ts

@@ -3713,7 +3713,7 @@ declare type CheckboxProps = {
     /**
      * Sets the label of the checkbox
      */
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
     /**
      * Help text for the checkbox
      */
@@ -3792,7 +3792,7 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
     /**
      * Sets the label of the checkbox
      */
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
     /**
      * Help text for the checkbox
      */
@@ -4185,7 +4185,7 @@ declare type CheckboxGroupProps = {
     /**
      * Renders the label of the checkbox group
      */
-    label: string;
+    label?: string;
     /**
      * Sets the position of the label
      *
@@ -5409,21 +5409,7 @@ declare type OTPInputPropsWithLabel = {
     accessibilityLabel?: string;
 };
 declare type OTPInputProps = (OTPInputPropsWithA11yLabel | OTPInputPropsWithLabel) & OTPInputCommonProps;
-/**
- * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
- *
- * ## Usage
- *
- * ```tsx
- *   <OTPInput
- *     label="Enter OTP"
- *     name="otpInput"
- *     onChange={({ name, value }): void => console.log({ name, value })}
- *     onOTPFilled={({ name, value }): void => console.log({ name, value })}
- *   />
- * ```
- */
-declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, accessibilityLabel, labelPosition, name, onChange, onFocus, onBlur, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
+declare const OTPInput: React__default.ForwardRefExoticComponent<OTPInputProps & React__default.RefAttributes<HTMLInputElement[]>>;
 
 /**
  * ### SelectInput
@@ -5857,7 +5843,7 @@ declare type RadioProps = {
     /**
      * Sets the label text of the Radio
      */
-    children: StringChildrenType;
+    children?: StringChildrenType;
     /**
      * Help text for the Radio
      */
@@ -5884,7 +5870,7 @@ declare const Radio: React__default.ForwardRefExoticComponent<{
     /**
      * Sets the label text of the Radio
      */
-    children: StringChildrenType;
+    children?: StringChildrenType | undefined;
     /**
      * Help text for the Radio
      */
@@ -6242,7 +6228,7 @@ declare type RadioGroupProps = {
     /**
      * Renders the label of the radio group
      */
-    label: string;
+    label?: string;
     /**
      * Sets the position of the label
      *
@@ -8131,4 +8117,4 @@ declare const PopoverInteractiveWrapper: React__default.ForwardRefExoticComponen
     onKeyDown?: ((event: React__default.KeyboardEvent<HTMLButtonElement>) => void) | undefined;
 } & Omit<BaseBoxProps, "as"> & React__default.RefAttributes<HTMLButtonElement>>;
 
-export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AutoComplete, AutoCompleteProps, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabletIcon, Tag, TagIcon, TagProps, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };
+export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AutoComplete, AutoCompleteProps, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabletIcon, Tag, TagIcon, TagProps, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };

package/build/components/index.development.web.js

@@ -1,6 +1,6 @@
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import * as React from 'react';
-import React__default, { useMemo, useCallback, useState, useEffect, useRef, useContext, createContext, Fragment as Fragment$1, Children, cloneElement, forwardRef } from 'react';
+import React__default, { useMemo, useCallback, useState, useEffect, useRef, useContext, createContext, Fragment as Fragment$1, useImperativeHandle, Children, cloneElement, forwardRef } from 'react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styled, { ThemeProvider, css, keyframes } from 'styled-components';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
@@ -2929,8 +2929,12 @@ var getElevationValue = function getElevationValue(elevation, theme, breakpoint)
 };
 var getAllProps = function getAllProps(props, breakpoint) {
   var _props$paddingTop, _props$paddingBottom, _props$paddingRight, _props$paddingLeft, _props$marginBottom, _props$marginTop, _props$marginRight, _props$marginLeft;
-  var hasBorder = props.borderBottom || props.borderTop || props.borderLeft || props.borderRight || props.borderBottomColor || props.borderTopColor || props.borderLeftColor || props.borderRightColor || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth || props.borderWidth || props.borderColor;
-  return _objectSpread$6h({
+  var hasBorder = props.borderWidth || props.borderColor;
+  var hasBorderRight = props.borderRight || props.borderRightColor || props.borderRightWidth;
+  var hasBorderLeft = props.borderLeft || props.borderLeftColor || props.borderLeftWidth;
+  var hasBorderTop = props.borderTop || props.borderTopColor || props.borderTopWidth;
+  var hasBorderBottom = props.borderBottom || props.borderBottomColor || props.borderBottomWidth;
+  return _objectSpread$6h(_objectSpread$6h({
     display: getResponsiveValue(props.display, breakpoint),
     overflow: getResponsiveValue(props.overflow, breakpoint),
     overflowX: getResponsiveValue(props.overflowX, breakpoint),
@@ -3021,7 +3025,13 @@ var getAllProps = function getAllProps(props, breakpoint) {
     borderTopRightRadius: getBorderRadiusValue(props.borderTopRightRadius, props.theme, breakpoint),
     borderBottomRightRadius: getBorderRadiusValue(props.borderBottomRightRadius, props.theme, breakpoint),
     borderBottomLeftRadius: getBorderRadiusValue(props.borderBottomLeftRadius, props.theme, breakpoint),
-    borderStyle: hasBorder ? 'solid' : undefined,
+    borderStyle: hasBorder ? 'solid' : undefined
+  }, !hasBorder && {
+    borderTopStyle: hasBorderTop ? 'solid' : undefined,
+    borderBottomStyle: hasBorderBottom ? 'solid' : undefined,
+    borderLeftStyle: hasBorderLeft ? 'solid' : undefined,
+    borderRightStyle: hasBorderRight ? 'solid' : undefined
+  }), {}, {
     touchAction: getResponsiveValue(props.touchAction, breakpoint),
     userSelect: getResponsiveValue(props.userSelect, breakpoint),
     pointerEvents: getResponsiveValue(props.pointerEvents),
@@ -15414,18 +15424,18 @@ var _Checkbox = function _Checkbox(_ref, ref) {
             isIndeterminate: isIndeterminate,
             isDisabled: _isDisabled,
             isNegative: _hasError
-          }), /*#__PURE__*/jsx(SelectorTitle, {
+          }), children ? /*#__PURE__*/jsx(SelectorTitle, {
             size: _size,
             isDisabled: _isDisabled,
             children: children
-          })]
-        }), /*#__PURE__*/jsx(BaseBox, {
+          }) : null]
+        }), showSupportingText ? /*#__PURE__*/jsx(BaseBox, {
           marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
-          children: showSupportingText && /*#__PURE__*/jsx(SelectorSupportText, {
+          children: /*#__PURE__*/jsx(SelectorSupportText, {
             id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
             children: helpText
           })
-        })]
+        }) : null]
       })
     }), /*#__PURE__*/jsx(FormHint, {
       errorText: errorText,
@@ -15620,14 +15630,14 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
         labelledBy: ids.labelId,
         componentName: "checkbox-group",
         testID: testID,
-        children: [/*#__PURE__*/jsx(FormLabel, {
+        children: [label ? /*#__PURE__*/jsx(FormLabel, {
           as: "span",
           necessityIndicator: necessityIndicator,
           position: labelPosition,
           id: ids.labelId,
           accessibilityText: accessibilityText,
           children: label
-        }), /*#__PURE__*/jsxs(BaseBox, {
+        }) : null, /*#__PURE__*/jsxs(BaseBox, {
           children: [/*#__PURE__*/jsx(BaseBox, {
             display: "flex",
             flexDirection: "column",
@@ -17838,11 +17848,12 @@ var Card = function Card(_ref) {
   return /*#__PURE__*/jsx(CardProvider, {
     children: /*#__PURE__*/jsx(CardRoot, _objectSpread$1h(_objectSpread$1h(_objectSpread$1h({
       as: as,
+      display: 'block',
+      borderRadius: "medium",
       onMouseEnter: onHover,
       shouldScaleOnHover: shouldScaleOnHover,
       isSelected: isSelected,
-      isFocused: isFocused,
-      borderRadius: "medium"
+      isFocused: isFocused
       // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN
       ,
       onClick: isReactNative$4() ? onClick : undefined,
@@ -23059,7 +23070,7 @@ var otpToArray = function otpToArray(code) {
  *   />
  * ```
  */
-var OTPInput = function OTPInput(_ref) {
+var _OTPInput = function _OTPInput(_ref, incomingRef) {
   var autoFocus = _ref.autoFocus,
     errorText = _ref.errorText,
     helpText = _ref.helpText,
@@ -23101,6 +23112,11 @@ var OTPInput = function OTPInput(_ref) {
     helpTextId = _useFormId.helpTextId,
     errorTextId = _useFormId.errorTextId,
     successTextId = _useFormId.successTextId;
+  useImperativeHandle(incomingRef, function () {
+    return inputRefs.map(function (ref) {
+      return ref.current;
+    });
+  }, [inputRefs]);
   useEffect(function () {
     // Effect for calling `onOTPFilled` callback
     if (inputValue && inputValue.length >= otpLength) {
@@ -23363,6 +23379,7 @@ var OTPInput = function OTPInput(_ref) {
     })]
   }));
 };
+var OTPInput = /*#__PURE__*/React__default.forwardRef(_OTPInput);
 
 var InputChevronIcon = function InputChevronIcon(props) {
   return /*#__PURE__*/jsxs(BaseBox, {
@@ -25869,14 +25886,14 @@ var _Radio = function _Radio(_ref, ref) {
             isChecked: state.isChecked,
             isDisabled: _isDisabled,
             isNegative: hasError
-          }), /*#__PURE__*/jsx(SelectorTitle, {
+          }), children ? /*#__PURE__*/jsx(SelectorTitle, {
             size: _size,
             isDisabled: _isDisabled,
             children: children
-          })]
-        }), /*#__PURE__*/jsx(BaseBox, {
+          }) : null]
+        }), showHelpText && /*#__PURE__*/jsx(BaseBox, {
           marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
-          children: showHelpText && /*#__PURE__*/jsx(SelectorSupportText, {
+          children: /*#__PURE__*/jsx(SelectorSupportText, {
             id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
             children: helpText
           })
@@ -26030,14 +26047,14 @@ var RadioGroup = function RadioGroup(_ref) {
         accessibilityRole: "radiogroup",
         componentName: "radio-group",
         testID: testID,
-        children: [/*#__PURE__*/jsx(FormLabel, {
+        children: [label ? /*#__PURE__*/jsx(FormLabel, {
           as: "span",
           necessityIndicator: necessityIndicator,
           position: labelPosition,
           id: ids.labelId,
           accessibilityText: accessibilityText && ",".concat(accessibilityText),
           children: label
-        }), /*#__PURE__*/jsxs(BaseBox, {
+        }) : null, /*#__PURE__*/jsxs(BaseBox, {
           children: [/*#__PURE__*/jsx(BaseBox, {
             display: "flex",
             flexDirection: "column",