@razorpay/blade 6.5.2 → 6.6.1

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

@@ -438,6 +438,7 @@ type Colors = {
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 
 type ThemeTokens = {
+  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
   border: Border;
   breakpoints: Breakpoints;
   colors: ColorsWithModes;
@@ -447,16 +448,6 @@ type ThemeTokens = {
   typography: TypographyWithPlatforms;
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-
-/**
- * A type defining React component with additional static prop `componentId`
- */
-type WithComponentId<Props> = ((props: Props) => React__default.ReactElement) & {
-  componentId: string;
-};
-
 // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
 type AriaRoles =
   | Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'>
@@ -936,6 +927,24 @@ type DotNotationSpacingStringToken = `spacing.${keyof Spacing}`;
  */
 type StringChildrenType = React__default.ReactText | React__default.ReactText[];
 
+/**
+ *
+ * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
+ *
+ * ### Usage
+ *
+ * ```ts
+ * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * ```
+ *
+ * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
+ *
+ * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
+ * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
+ *
+ */
+type StringWithAutocomplete = string & Record<never, never>;
+
 type TestID$1 = {
   testID?: string;
 };
@@ -994,6 +1003,7 @@ declare type ActionListProps = {
 declare const ActionList: ({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element;
 
 type Theme$1 = {
+  name: ThemeTokens['name'];
   border: Border;
   breakpoints: Breakpoints;
   colors: Colors;
@@ -1459,32 +1469,14 @@ declare type ActionListSectionProps = {
      */
     _hideDivider?: boolean;
 } & TestID$1;
-declare const ActionListSection: WithComponentId<ActionListSectionProps>;
-declare const ActionListItemIcon: WithComponentId<{
+declare const ActionListSection: ({ title, children, testID, _hideDivider, }: ActionListSectionProps) => JSX.Element;
+declare const ActionListItemIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
-declare const ActionListItemText: WithComponentId<{
+}) => JSX.Element;
+declare const ActionListItemText: ({ children, }: {
     children: StringChildrenType;
-}>;
-/**
- * ### ActionListItem
- *
- * Creates option inside `ActionList`.
- *
- * #### Usage
- *
- * ```jsx
- * <ActionList>
- *  <ActionListItem
- *    title="Home"
- *    value="home"
- *    leading={<ActionListItemIcon icon={HomeIcon} />}
- *    trailing={<ActionListItemText>⌘ + S</ActionListItemText>}
- *  />
- * </ActionList>
- * ```
- */
-declare const ActionListItem: WithComponentId<ActionListItemProps>;
+}) => React__default.ReactElement;
+declare const ActionListItem: (props: ActionListItemProps) => JSX.Element;
 
 declare type ActionListHeaderProps = {
     title: string;
@@ -1495,29 +1487,10 @@ declare type ActionListHeaderProps = {
      */
     leading?: React__default.ReactNode;
 } & TestID$1;
-/**
- * ### ActionListHeader
- *
- * To be used inside `ActionList`
- *
- * #### Usage
- *
- * ```jsx
- * <ActionListHeader
- *  title="Search Tips"
- *  leading={
- *    <ActionListHeaderIcon
- *      title="Recent Searches"
- *      icon={HistoryIcon}
- *    />
- *  }
- * />
- * ```
- */
-declare const ActionListHeader: WithComponentId<ActionListHeaderProps>;
-declare const ActionListHeaderIcon: WithComponentId<{
+declare const ActionListHeader: (props: ActionListHeaderProps) => JSX.Element;
+declare const ActionListHeaderIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
+}) => React__default.ReactElement;
 
 declare type ActionListFooterProps = {
     title?: string;
@@ -1534,31 +1507,10 @@ declare type ActionListFooterProps = {
      */
     trailing?: React__default.ReactNode;
 } & TestID$1;
-/**
- * ### ActionListFooter
- *
- * To be used inside `ActionList`
- *
- * #### Usage
- *
- * ```jsx
- * <ActionListFooter
- *  title="Search Tips"
- *  leading={<ActionListFooterIcon icon={SearchIcon} />}
- *  trailing={
- *    <Button
- *      onClick={() => { console.log('click') }}
- *    >
- *      Apply
- *    </Button>
- *  }
- * />
- * ```
- */
-declare const ActionListFooter: WithComponentId<ActionListFooterProps>;
-declare const ActionListFooterIcon: WithComponentId<{
+declare const ActionListFooter: (props: ActionListFooterProps) => JSX.Element;
+declare const ActionListFooterIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
+}) => React__default.ReactElement;
 
 declare type ActionListItemAssetProps = {
     /**
@@ -1572,10 +1524,7 @@ declare type ActionListItemAssetProps = {
      */
     alt: string;
 };
-/**
- *
- */
-declare const ActionListItemAsset: WithComponentId<ActionListItemAssetProps>;
+declare const ActionListItemAsset: (props: ActionListItemAssetProps) => React.ReactElement;
 
 declare type PrimaryAction = {
     text: string;
@@ -1711,6 +1660,7 @@ declare const ThemeContext: React$1.Context<ThemeContext>;
 declare const useTheme: () => ThemeContext;
 
 declare type Theme = {
+    name: ThemeTokens['name'];
     border: Border;
     breakpoints: Breakpoints;
     colors: Colors;
@@ -2216,7 +2166,29 @@ declare type LayoutProps = MakeObjectResponsive<{
     width: SpacingValueType;
     minWidth: SpacingValueType;
     maxWidth: SpacingValueType;
-} & Pick<CSSObject, 'display' | 'overflow' | 'overflowX' | 'overflowY'>>;
+} & Pick<CSSObject, 'overflow' | 'overflowX' | 'overflowY'> & Platform.Select<{
+    web: {
+        /**
+         *
+         * On Web, The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
+         *
+         * @see https://developer.mozilla.org/docs/Web/CSS/display
+         */
+        display: CSSObject['display'];
+    };
+    native: {
+        /**
+         *
+         *
+         * On React Native, **`display`** property sets whether an element can be `flex` or `none`
+         *
+         * @see https://reactnative.dev/docs/layout-props.html#display
+         *
+         * @default 'flex'
+         */
+        display: 'none' | 'flex';
+    };
+}>>;
 declare type FlexboxProps = MakeObjectResponsive<{
     /**
      * This uses the native gap property which might not work on older browsers.
@@ -2337,7 +2309,7 @@ declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardPro
 declare type CardBodyProps = {
     children: React__default.ReactNode;
 } & TestID$1;
-declare const CardBody: WithComponentId<CardBodyProps>;
+declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
 
 declare type LinkCommonProps = {
     variant?: 'anchor' | 'button';
@@ -2354,7 +2326,25 @@ declare type LinkCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium';
-} & TestID$1 & StyledPropsBlade;
+} & TestID$1 & StyledPropsBlade & Platform.Select<{
+    native: {
+        /**
+         * Defines how far your touch can start away from the link
+         */
+        hitSlop?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        } | number;
+    };
+    web: {
+        /**
+         * This is a react-native only prop and has no effect on web.
+         */
+        hitSlop?: undefined;
+    };
+}>;
 declare type LinkWithoutIconProps = LinkCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -2379,7 +2369,7 @@ declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
     rel?: undefined;
 };
 declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
-declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, ...styledProps }: LinkProps) => ReactElement;
+declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, ...styledProps }: LinkProps) => ReactElement;
 
 type BladeElementRef = Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
 
@@ -2523,23 +2513,23 @@ type CounterProps$1 = {
 } & TestID$1 &
   StyledPropsBlade;
 
-declare const CardHeaderIcon: WithComponentId<{
+declare const CardHeaderIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
-declare const CardHeaderCounter: WithComponentId<CounterProps$1>;
-declare const CardHeaderBadge: WithComponentId<BadgeProps>;
-declare const CardHeaderText: WithComponentId<TextProps$1<{
+}) => React__default.ReactElement;
+declare const CardHeaderCounter: (props: CounterProps$1) => React__default.ReactElement;
+declare const CardHeaderBadge: (props: BadgeProps) => React__default.ReactElement;
+declare const CardHeaderText: (props: TextProps$1<{
     variant: TextVariant$1;
-}>>;
-declare const CardHeaderLink: WithComponentId<LinkProps>;
+}>) => React__default.ReactElement;
+declare const CardHeaderLink: (props: LinkProps) => React__default.ReactElement;
 declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'iconPosition' | 'isFullWidth' | 'children'> & {
     icon: IconComponent$1;
 };
-declare const CardHeaderIconButton: WithComponentId<CardHeaderIconButtonProps>;
+declare const CardHeaderIconButton: (props: CardHeaderIconButtonProps) => React__default.ReactElement;
 declare type CardHeaderProps = {
     children?: React__default.ReactNode;
 } & TestID$1;
-declare const CardHeader: WithComponentId<CardHeaderProps>;
+declare const CardHeader: ({ children, testID }: CardHeaderProps) => React__default.ReactElement;
 declare type CardHeaderLeadingProps = {
     title: string;
     subtitle?: string;
@@ -2556,7 +2546,7 @@ declare type CardHeaderLeadingProps = {
      */
     suffix?: React__default.ReactNode;
 };
-declare const CardHeaderLeading: WithComponentId<CardHeaderLeadingProps>;
+declare const CardHeaderLeading: ({ title, subtitle, prefix, suffix, }: CardHeaderLeadingProps) => React__default.ReactElement;
 declare type CardHeaderTrailingProps = {
     /**
      * Renders a visual ornament in card header trailing section
@@ -2565,7 +2555,7 @@ declare type CardHeaderTrailingProps = {
      */
     visual?: React__default.ReactNode;
 };
-declare const CardHeaderTrailing: WithComponentId<CardHeaderTrailingProps>;
+declare const CardHeaderTrailing: ({ visual }: CardHeaderTrailingProps) => React__default.ReactElement;
 
 declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'> & {
     text: ButtonProps['children'];
@@ -2573,19 +2563,19 @@ declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel'
 declare type CardFooterProps = {
     children?: React__default.ReactNode;
 } & TestID$1;
-declare const CardFooter: WithComponentId<CardFooterProps>;
+declare const CardFooter: ({ children, testID }: CardFooterProps) => React__default.ReactElement;
 declare type CardFooterLeadingProps = {
     title?: string;
     subtitle?: string;
 };
-declare const CardFooterLeading: WithComponentId<CardFooterLeadingProps>;
+declare const CardFooterLeading: ({ title, subtitle }: CardFooterLeadingProps) => React__default.ReactElement;
 declare type CardFooterTrailingProps = {
     actions?: {
         primary?: CardFooterAction;
         secondary?: CardFooterAction;
     };
 };
-declare const CardFooterTrailing: WithComponentId<CardFooterTrailingProps>;
+declare const CardFooterTrailing: ({ actions }: CardFooterTrailingProps) => React__default.ReactElement;
 
 declare type IconButtonProps = {
     /**
@@ -2924,44 +2914,13 @@ declare type DropdownProps = {
     selectionType?: 'single' | 'multiple';
     children: React__default.ReactNode[];
 } & StyledPropsBlade;
-/**
- * ### Dropdown component
- *
- * Dropdown component is generic component that controls the dropdown functionality.
- * It can be used with multiple triggers and mostly contains ActionList component inside it
- *
- * ---
- *
- * #### Usage
- *
- * ```jsx
- * <Dropdown selectionType="single">
- *  <SelectInput />
- *  <DropdownOverlay>
- *    <ActionList>
- *      <ActionListItem />
- *      <ActionListItem />
- *    </ActionList>
- *  </DropdownOverlay>
- * </Dropdown>
- * ```
- *
- * ---
- *
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select Dropdown Documentation}
- */
-declare const Dropdown: WithComponentId<DropdownProps>;
+declare const Dropdown: ({ children, selectionType, ...styledProps }: DropdownProps) => JSX.Element;
 
 declare type DropdownOverlayProps = {
     children: React__default.ReactNode;
 } & TestID$1;
 
-/**
- * Overlay of dropdown
- *
- * Wrap your ActionList within this component
- */
-declare const DropdownOverlay: WithComponentId<DropdownOverlayProps>;
+declare const DropdownOverlay: ({ children, testID }: DropdownOverlayProps) => JSX.Element;
 
 declare const ArrowDownIcon: IconComponent;
 
@@ -3812,7 +3771,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      */
     type?: Type;
 } & StyledPropsBlade;
-declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -3901,7 +3860,7 @@ declare type PasswordInputExtraProps = {
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
 };
 declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
-declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<MakeObjectResponsive<{
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<MakeObjectResponsive<{
     margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
     marginX: SpacingValueType;
     marginY: SpacingValueType;
@@ -3946,7 +3905,7 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
      */
     onClearButtonClick?: () => void;
 } & StyledPropsBlade;
-declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "validationState" | "isRequired" | "maxCharacters"> & {
+declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "validationState" | "isRequired" | "maxCharacters"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -3990,6 +3949,11 @@ declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputP
     gridTemplate?: undefined;
 }, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
+declare type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
+    name?: string;
+    value?: string;
+    inputIndex: number;
+}) => void;
 declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID'> & {
     /**
      * Determines the number of input fields to show for the OTP
@@ -4018,6 +3982,14 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
      *
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
+    /**
+     * The callback function to be invoked when one of the input fields gets focus
+     */
+    onFocus?: FormInputOnEventWithIndex;
+    /**
+     * The callback function to be invoked when one of the input fields is blurred
+     */
+    onBlur?: FormInputOnEventWithIndex;
 } & StyledPropsBlade;
 /**
  * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
@@ -4033,7 +4005,7 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
  *   />
  * ```
  */
-declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
+declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onFocus, onBlur, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
 
 declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
     icon?: IconComponent$1;
@@ -4069,7 +4041,7 @@ declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' |
  *
  * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
  */
-declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "name" | "onBlur" | "onFocus" | "onClick" | "prefix" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired"> & {
+declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "onBlur" | "onFocus" | "onClick" | "prefix" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired"> & {
     icon?: IconComponent$1 | undefined;
     onChange?: (({ name, values }: {
         name?: string | undefined;
@@ -4131,10 +4103,7 @@ declare type ListItemProps = {
      */
     _itemNumber?: undefined;
 } & TestID$1;
-declare const ListItem: {
-    ({ children, icon, _itemNumber, testID, }: ListItemProps): React__default.ReactElement;
-    componentId: string;
-};
+declare const ListItem: ({ children, icon, _itemNumber, testID, }: ListItemProps) => React__default.ReactElement;
 
 declare type ListCommonProps = {
     /**
@@ -4164,36 +4133,10 @@ declare type ListWithoutIconProps = ListCommonProps & {
     icon?: undefined;
 };
 declare type ListProps = ListWithIconProps | ListWithoutIconProps;
-/**
- * List Component is used to display a set of related items that are composed of text/links. Each list item begins with a bullet or a number.
- *
- * ## Usage
- *
- * ```tsx
- *   <List
- *     variant='unordered'
- *     size='medium'
- *   >
- *    <ListItem>
- *      Item 1
- *      <List>
- *        <ListItem>Item 1.1</ListItem>
- *      </List>
- *    </ListItem>
- *    <ListItem>Item 2</ListItem>
- *  <List />
- * ```
- */
-declare const List: {
-    ({ variant, size, children, icon, testID, ...styledProps }: ListProps): React__default.ReactElement;
-    componentId: string;
-};
+declare const List: ({ variant, size, children, icon, testID, ...styledProps }: ListProps) => React__default.ReactElement;
 
 declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
-declare const ListItemLink: {
-    ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps): React.ReactElement;
-    componentId: string;
-};
+declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
 
 declare type TitleProps = {
     size?: 'small' | 'medium' | 'large';
@@ -4345,10 +4288,7 @@ declare type CodeProps = {
 declare const Code: ({ children, size, testID, ...styledProps }: CodeProps) => JSX.Element;
 
 declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
-declare const ListItemCode: {
-    ({ children, testID }: ListItemCodeProps): React.ReactElement;
-    componentId: string;
-};
+declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;
 
 declare type Assertiveness = AriaAttributes['liveRegion'];
 
@@ -4678,7 +4618,11 @@ declare const BaseBox: styled_components.StyledComponent<typeof View, styled_com
     width: SpacingValueType;
     minWidth: SpacingValueType;
     maxWidth: SpacingValueType;
-} & Pick<styled_components.CSSObject, "display" | "overflow" | "overflowX" | "overflowY">> & MakeObjectResponsive<{
+} & Pick<styled_components.CSSObject, "overflow" | "overflowX" | "overflowY"> & {
+    display: "none" | "flex";
+} & {
+    __brand__?: "platform-native" | undefined;
+}> & MakeObjectResponsive<{
     gap: SpacingValueType;
     rowGap: SpacingValueType;
     columnGap: SpacingValueType;
@@ -4711,7 +4655,7 @@ declare const BaseBox: styled_components.StyledComponent<typeof View, styled_com
     children?: React$1.ReactNode | React$1.ReactNode[];
 } & TestID>, "backgroundColor" | "as"> & Partial<MakeObjectResponsive<{
     borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
-    backgroundColor: "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.disabled" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | (string & Record<never, never>);
+    backgroundColor: (string & Record<never, never>) | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.disabled" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active";
     lineHeight: SpacingValueType;
 } & Pick<styled_components.CSSObject, "border" | "transform" | "borderBottom" | "borderLeft" | "borderRight" | "borderTop">> & {
     className?: string | undefined;