@razorpay/blade 6.0.5 → 6.2.0

package/build/components/index.d.ts

@@ -4,6 +4,59 @@ import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, Ke
 import { AccessibilityRole, View, GestureResponderEvent } from 'react-native';
 import { CSSObject } from 'styled-components';
 
+declare type ActionListProps = {
+    children: React__default.ReactNode[];
+    /**
+     * Decides the backgroundColor of ActionList
+     */
+    surfaceLevel?: 2 | 3;
+};
+/**
+ * ### ActionList
+ *
+ * List of multiple actionable items. Can be used as menu items inside `Dropdown`,
+ * `BottomSheet` and as selectable items when combined with `SelectInput`
+ *
+ * #### Usage
+ *
+ * ```jsx
+ * <Dropdown>
+ *  <SelectInput label="Select Action" />
+ *  <DropdownOverlay>
+ *    <ActionList>
+ *      <ActionListHeader
+ *        title="Recent Searches"
+ *        leading={<ActionListHeaderIcon icon={HistoryIcon} />}
+ *      />
+ *      <ActionListItem
+ *        title="Home"
+ *        value="home"
+ *        leading={<ActionListItemIcon icon={HomeIcon} />}
+ *      />
+ *      <ActionListItem
+ *        title="Pricing"
+ *        value="pricing"
+ *        leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
+ *      />
+ *      <ActionListHeader
+ *        title="Search Tips"
+ *        leading={<ActionListFooterIcon icon={SearchIcon} />}
+ *        trailing={
+ *          <Button
+ *            onClick={() => console.log('clicked')}
+ *          >
+ *            Apply
+ *          </Button>
+ *        }
+ *      />
+ *    </ActionList>
+ *  </DropdownOverlay>
+ * </Dropdown>
+ * ```
+ *
+ */
+declare const ActionList: ({ children, surfaceLevel }: ActionListProps) => JSX.Element;
+
 type BorderRadius = Readonly<{
   /** none: 0(px/rem/pt) */
   none: 0;
@@ -848,6 +901,229 @@ type ThemeTokens = {
   typography: TypographyWithPlatforms;
 };
 
+type Theme$1 = {
+  border: Border;
+  breakpoints: Breakpoints;
+  colors: Colors;
+  spacing: Spacing;
+  motion: Motion;
+  shadows: Omit<Shadows, 'color'> & {
+    color: {
+      level: Record<ShadowLevels, string>;
+    };
+  };
+  typography: Typography;
+};
+
+type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['feedback']['icon']
+>}`;
+
+type FeedbackActionIconColors$1 = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['feedback'][Feedback]['action']['icon']
+>}`;
+
+type ActionIconColors$1 = `action.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['action']['icon']
+>}`;
+
+type TextIconColors$1 = `surface.text.${DotNotationColorStringToken<
+  Theme$1['colors']['surface']['text']
+>}`;
+
+type SurfaceActionIconColors$1 = `surface.action.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['surface']['action']['icon']
+>}`;
+
+type BadgeIconColors$1 = `badge.icon.${DotNotationColorStringToken<
+  Theme$1['colors']['badge']['icon']
+>}`;
+
+type IconSize$1 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
+type IconProps$1 = {
+  /**
+   * Color token (not to be confused with actual hsla value)
+   */
+  color:
+    | ActionIconColors$1
+    | SurfaceActionIconColors$1
+    | FeedbackIconColors$1
+    | FeedbackActionIconColors$1
+    | TextIconColors$1
+    | BadgeIconColors$1
+    | 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
+  size: IconSize$1;
+};
+type IconComponent$1 = React.ComponentType<IconProps$1>;
+
+declare type ActionListItemProps = {
+    title: string;
+    description?: string;
+    onClick?: (clickProps: {
+        name: string;
+        value?: boolean;
+    }) => void;
+    /**
+     * value that you get from `onChange` event on SelectInput or in form submissions.
+     */
+    value: string;
+    /**
+     * Link to open when item is clicked.
+     */
+    href?: string;
+    /**
+     * Item that goes on left-side of item.
+     *
+     * Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`
+     *
+     * Will be overriden in multiselect
+     */
+    leading?: React__default.ReactNode;
+    /**
+     * Item that goes on right-side of item.
+     *
+     * Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`
+     */
+    trailing?: React__default.ReactNode;
+    /**
+     * If item is selected on page load
+     */
+    isDefaultSelected?: boolean;
+    isDisabled?: boolean;
+    intent?: Extract<Feedback, 'negative'>;
+    /**
+     * Internally passed from ActionList. No need to pass it explicitly
+     *
+     * @private
+     */
+    _index?: number;
+};
+declare const ActionListSectionDivider: () => JSX.Element;
+declare type ActionListSectionProps = {
+    title: string;
+    children: React__default.ReactNode[] | React__default.ReactNode;
+    /**
+     * Internally used to hide the divider on final item in React Native.
+     *
+     * Should not be used by consumers (also won't work on web)
+     *
+     * @private
+     */
+    _hideDivider?: boolean;
+};
+declare const ActionListSection: WithComponentId<ActionListSectionProps>;
+declare const ActionListItemIcon: WithComponentId<{
+    icon: IconComponent$1;
+}>;
+declare const ActionListItemText: WithComponentId<{
+    children: string;
+}>;
+/**
+ * ### 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>;
+
+declare type ActionListHeaderProps = {
+    title: string;
+    /**
+     * Asset to be added on left side of Header.
+     *
+     * Valid children - `ActionListHeaderIcon`
+     */
+    leading?: React__default.ReactNode;
+};
+/**
+ * ### 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<{
+    icon: IconComponent$1;
+}>;
+
+declare type ActionListFooterProps = {
+    title?: string;
+    /**
+     * Asset to be added on left side of Footer.
+     *
+     * Valid children - `ActionListFooterIcon`
+     */
+    leading?: React__default.ReactNode;
+    /**
+     * Elements to be added on right side of Footer.
+     *
+     * Anything can be passed here but maybe don't? Should ideally have Button or Tick Icon Buttons.
+     */
+    trailing?: React__default.ReactNode;
+};
+/**
+ * ### 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<{
+    icon: IconComponent$1;
+}>;
+
+declare type ActionListItemAssetProps = {
+    /**
+     * Source of the image.
+     */
+    src: string;
+    /**
+     * Alt tag for the image
+     */
+    alt: string;
+};
+declare const ActionListItemAsset: WithComponentId<ActionListItemAssetProps>;
+
 declare type PrimaryAction = {
     text: string;
     onClick: () => void;
@@ -921,61 +1197,6 @@ declare type AlertProps = {
 };
 declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, }: AlertProps) => ReactElement | null;
 
-type Theme$1 = {
-  border: Border;
-  breakpoints: Breakpoints;
-  colors: Colors;
-  spacing: Spacing;
-  motion: Motion;
-  shadows: Omit<Shadows, 'color'> & {
-    color: {
-      level: Record<ShadowLevels, string>;
-    };
-  };
-  typography: Typography;
-};
-
-type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
-  Theme$1['colors']['feedback']['icon']
->}`;
-
-type FeedbackActionIconColors$1 = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<
-  Theme$1['colors']['feedback'][Feedback]['action']['icon']
->}`;
-
-type ActionIconColors$1 = `action.icon.${DotNotationColorStringToken<
-  Theme$1['colors']['action']['icon']
->}`;
-
-type TextIconColors$1 = `surface.text.${DotNotationColorStringToken<
-  Theme$1['colors']['surface']['text']
->}`;
-
-type SurfaceActionIconColors$1 = `surface.action.icon.${DotNotationColorStringToken<
-  Theme$1['colors']['surface']['action']['icon']
->}`;
-
-type BadgeIconColors$1 = `badge.icon.${DotNotationColorStringToken<
-  Theme$1['colors']['badge']['icon']
->}`;
-
-type IconSize$1 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
-type IconProps$1 = {
-  /**
-   * Color token (not to be confused with actual hsla value)
-   */
-  color:
-    | ActionIconColors$1
-    | SurfaceActionIconColors$1
-    | FeedbackIconColors$1
-    | FeedbackActionIconColors$1
-    | TextIconColors$1
-    | BadgeIconColors$1
-    | 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
-  size: IconSize$1;
-};
-type IconComponent$1 = React.ComponentType<IconProps$1>;
-
 declare type BadgeProps = {
     /**
      * Sets the label for the badge.
@@ -1474,6 +1695,11 @@ declare type CheckboxProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
+    /**
+     * Sets the tab-index property on checkbox element
+     *
+     */
+    tabIndex?: number;
 };
 declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<BladeElementRef>>;
 
@@ -1553,6 +1779,48 @@ declare type CheckboxGroupProps = {
 };
 declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, }: CheckboxGroupProps) => React__default.ReactElement;
 
+declare type DropdownProps = {
+    selectionType?: 'single' | 'multiple';
+    children: React__default.ReactNode[];
+};
+/**
+ * ### 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 type DropdownOverlayProps = {
+    children: React__default.ReactNode;
+};
+/**
+ * Overlay of dropdown
+ *
+ * Wrap your ActionList within this component
+ */
+declare const DropdownOverlay: WithComponentId<DropdownOverlayProps>;
+
 declare const ArrowDownIcon: IconComponent;
 
 declare const ArrowLeftIcon: IconComponent;
@@ -2171,9 +2439,9 @@ type FormInputOnKeyDownEvent = {
 
 declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
     /**
-     * Determines if it needs to be rendered as input or textarea
+     * Determines if it needs to be rendered as input, textarea or button
      */
-    as?: 'input' | 'textarea';
+    as?: 'input' | 'textarea' | 'button';
     /**
      * ID that will be used for accessibility
      */
@@ -2206,6 +2474,10 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
      * The callback function to be invoked when the value of the input field changes
      */
     onChange?: FormInputOnEvent;
+    /**
+     * The callback function to be invoked when input is clicked
+     */
+    onClick?: FormInputOnEvent;
     /**
      * The callback function to be invoked when the value of the input field has any input
      */
@@ -2220,6 +2492,10 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
      * For React Native this will call `onEndEditing` event since we want to get the last value of the input field
      */
     onBlur?: FormInputOnEvent;
+    /**
+     * Ignores the blur event animation (Used in Select to ignore blur animation when item in option is clicked)
+     */
+    shouldIgnoreBlurAnimation?: boolean;
     /**
      * Used to turn the input field to controlled so user can control the value
      */
@@ -2313,6 +2589,16 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
      * Sets the accessibility label for the input
      */
     accessibilityLabel?: string;
+    /**
+     * Sets the id of the label
+     *
+     * (Useful when assigning one label to multiple elements using aria-labelledby)
+     */
+    labelId?: string;
+    /**
+     * Can be used in select to set the id of the active descendant from the listbox
+     */
+    activeDescendant?: string;
     /**
      * Hides the label text
      */
@@ -2326,6 +2612,18 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
      * for internal metric collection purposes
      */
     componentName?: string;
+    /**
+     * whether the input has a popup
+     */
+    hasPopup?: AriaAttributes['hasPopup'];
+    /**
+     * id of the popup
+     */
+    popupId?: string;
+    /**
+     * true if popup is in expanded state
+     */
+    isPopupExpanded?: boolean;
 };
 
 declare type Type = Exclude<BaseInputProps['type'], 'password'>;
@@ -2353,7 +2651,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      */
     type?: Type;
 };
-declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "label" | "value" | "name" | "autoFocus" | "defaultValue" | "prefix" | "onFocus" | "onBlur" | "onChange" | "isDisabled" | "labelPosition" | "suffix" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "label" | "value" | "name" | "autoFocus" | "defaultValue" | "prefix" | "onFocus" | "onBlur" | "onChange" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -2477,6 +2775,48 @@ 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, }: 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'> & {
+    icon?: IconComponent$1;
+    onChange?: ({ name, values }: {
+        name?: string;
+        values: string[];
+    }) => void;
+};
+/**
+ * ### SelectInput
+ *
+ * Our equivalent of `<select>` tag. Lets you select items from given options.
+ *
+ * To be used in combination of `Dropdown` and `ActionList` component
+ *
+ * ---
+ *
+ * #### Usage
+ *
+ * ```diff
+ * <Dropdown>
+ * + <SelectInput label="Select Fruits" />
+ *   <DropdownOverlay>
+ *     <ActionList>
+ *       <ActionListItem title="Mango" value="mango" />
+ *       <ActionListItem title="Apple" value="apple" />
+ *     </ActionList>
+ *   </DropdownOverlay>
+ * </Dropdown>
+ * ```
+ *
+ * ---
+ *
+ * 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, "placeholder" | "label" | "name" | "autoFocus" | "prefix" | "onFocus" | "onBlur" | "onClick" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix"> & {
+    icon?: IconComponent$1 | undefined;
+    onChange?: (({ name, values }: {
+        name?: string | undefined;
+        values: string[];
+    }) => void) | undefined;
+} & React__default.RefAttributes<BladeElementRef>>;
+
 declare type IndicatorCommonProps = {
     /**
      * Sets the color tone
@@ -2514,9 +2854,244 @@ declare type IndicatorWithA11yLabel = {
 declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
 declare const Indicator: ({ accessibilityLabel, children, size, intent, }: IndicatorProps) => ReactElement;
 
-declare type Assertiveness = AriaAttributes['liveRegion'];
-
-/**
+declare type ListItemProps = {
+    /**
+     * Children to be rendered for ListItem. This can be a text, ListItemLink or another List.
+     *
+     */
+    children: React__default.ReactNode;
+    /**
+     * Icon to be rendered for a ListItem's bullet.
+     *
+     */
+    icon?: IconComponent;
+    /**
+     * This is a private prop to be used only for internal logic purposes.
+     *
+     */
+    _itemNumber?: undefined;
+};
+declare const ListItem: {
+    ({ children, icon, _itemNumber }: ListItemProps): React__default.ReactElement;
+    componentId: string;
+};
+
+declare type ListCommonProps = {
+    /**
+     * ListItem to be rendered for the List.
+     *
+     */
+    children: React__default.ReactElement<ListItemProps> | React__default.ReactElement<ListItemProps>[];
+    /**
+     * Sets the variant to be rendered for the List.
+     *
+     * @default 'unordered'
+     */
+    variant?: 'unordered' | 'ordered' | 'ordered-filled';
+    /**
+     * Sets the size for the List.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+};
+declare type ListWithIconProps = ListCommonProps & {
+    variant?: 'unordered';
+    icon?: IconComponent;
+};
+declare type ListWithoutIconProps = ListCommonProps & {
+    variant?: 'ordered' | 'ordered-filled';
+    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 }: ListProps): React__default.ReactElement;
+    componentId: string;
+};
+
+declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
+declare const ListItemLink: {
+    ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, }: ListItemLinkProps): React.ReactElement;
+    componentId: string;
+};
+
+declare type TitleProps = {
+    size?: 'small' | 'medium' | 'large';
+    contrast?: ColorContrastTypes;
+    type?: TextTypes;
+    children: string;
+};
+declare const Title: ({ size, type, contrast, children, }: TitleProps) => ReactElement;
+
+declare type HeadingVariant = 'regular' | 'subheading';
+declare type HeadingSize = 'small' | 'medium' | 'large';
+declare type HeadingCommonProps = {
+    type?: TextTypes;
+    contrast?: ColorContrastTypes;
+    children: string;
+};
+declare type HeadingNormalVariant = HeadingCommonProps & {
+    variant?: Exclude<HeadingVariant, 'subheading'>;
+    /**
+     *
+     * @default small
+     */
+    size?: HeadingSize;
+    weight?: keyof Theme$1['typography']['fonts']['weight'];
+};
+declare type HeadingSubHeadingVariant = HeadingCommonProps & {
+    variant?: Extract<HeadingVariant, 'subheading'>;
+    /**
+     * `size` cannot be used with variant="subheading". Either change to variant="regular" or remove size prop
+     */
+    size?: undefined;
+    weight?: keyof Pick<Theme$1['typography']['fonts']['weight'], 'bold'>;
+};
+/**
+ * Conditionally changing props based on variant.
+ * Overloads or union gives wrong intellisense.
+ */
+declare type HeadingProps<T> = T extends {
+    variant: infer Variant;
+} ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
+declare const Heading: <T extends {
+    variant: HeadingVariant;
+}>({ variant, size, type, weight, contrast, children, }: HeadingProps<T>) => ReactElement;
+
+declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
+declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
+declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
+declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
+declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
+declare type BaseTextProps = {
+    id?: string;
+    color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
+    fontFamily?: keyof Theme$1['typography']['fonts']['family'];
+    fontSize?: keyof Theme$1['typography']['fonts']['size'];
+    fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
+    fontStyle?: 'italic' | 'normal';
+    textDecorationLine?: 'line-through' | 'none' | 'underline';
+    lineHeight?: keyof Theme$1['typography']['lineHeights'];
+    /**
+     * Web only
+     */
+    as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+    textAlign?: 'center' | 'justify' | 'left' | 'right';
+    truncateAfterLines?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+    accessibilityProps?: Partial<AccessibilityProps>;
+    /**
+     * React Native only
+     */
+    numberOfLines?: number;
+    componentName?: 'text' | 'title' | 'heading' | 'code';
+};
+
+declare type TextCommonProps = {
+    type?: TextTypes;
+    contrast?: ColorContrastTypes;
+    truncateAfterLines?: number;
+    children: React.ReactNode;
+    weight?: keyof Theme$1['typography']['fonts']['weight'];
+    /**
+     * **For Internal use only**:  Sets the color of the Text component
+     */
+    color?: BaseTextProps['color'];
+};
+declare type TextVariant = 'body' | 'caption';
+declare type TextBodyVariant = TextCommonProps & {
+    variant?: Extract<TextVariant, 'body'>;
+    size?: 'xsmall' | 'small' | 'medium';
+};
+declare type TextCaptionVariant = TextCommonProps & {
+    variant?: Extract<TextVariant, 'caption'>;
+    size?: 'medium';
+};
+/**
+ * Conditionally changing props based on variant.
+ * Overloads or union gives wrong intellisense.
+ */
+declare type TextProps<T> = T extends {
+    variant: infer Variant;
+} ? Variant extends 'caption' ? TextCaptionVariant : Variant extends 'body' ? TextBodyVariant : T : T;
+declare type TextForwardedAs = {
+    forwardedAs?: BaseTextProps['as'];
+};
+declare const getTextProps: <T extends {
+    variant: TextVariant;
+}>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "size" | "variant" | "type" | "weight" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
+declare const Text: <T extends {
+    variant: TextVariant;
+}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
+
+declare type CodeProps = {
+    children: string;
+    /**
+     * Decides the fontSize and padding of Code
+     *
+     * @default small
+     */
+    size?: 'small' | 'medium';
+};
+/**
+ * Code component can be used for displaying token, variable names, or inlined code snippets.
+ *
+ * ## Usage
+ *
+ * ### In Web
+ * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
+ *
+ * ```tsx
+ * <Text>
+ *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
+ * </Text>
+ * ```
+ *
+ * ### In React Native
+ *
+ * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
+ *
+ * ```tsx
+ *  <Box flexWrap="wrap" flexDirection="row" alignItems="flex-start">
+ *   <Text>Lorem ipsum </Text>
+ *   <Code>SENTRY_TOKEN</Code>
+ *   <Text> normal text</Text>
+ * </Box>
+ * ```
+ */
+declare const Code: ({ children, size }: CodeProps) => JSX.Element;
+
+declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
+declare const ListItemCode: {
+    ({ children }: ListItemCodeProps): React.ReactElement;
+    componentId: string;
+};
+
+declare type Assertiveness = AriaAttributes['liveRegion'];
+
+/**
  * Announces the message using screen reader technology.
  */
 declare function announce(message: string, assertiveness?: Assertiveness): void;
@@ -2756,160 +3331,16 @@ declare type SkipNavContentProps = {
 };
 declare const SkipNavContent: ({ id }: SkipNavContentProps) => JSX.Element;
 
-declare type TitleProps = {
-    size?: 'small' | 'medium' | 'large';
-    contrast?: ColorContrastTypes;
-    type?: TextTypes;
-    children: string;
-};
-declare const Title: ({ size, type, contrast, children, }: TitleProps) => ReactElement;
-
-declare type HeadingVariant = 'regular' | 'subheading';
-declare type HeadingSize = 'small' | 'medium' | 'large';
-declare type HeadingCommonProps = {
-    type?: TextTypes;
-    contrast?: ColorContrastTypes;
-    children: string;
-};
-declare type HeadingNormalVariant = HeadingCommonProps & {
-    variant?: Exclude<HeadingVariant, 'subheading'>;
-    /**
-     *
-     * @default small
-     */
-    size?: HeadingSize;
-    weight?: keyof Theme$1['typography']['fonts']['weight'];
-};
-declare type HeadingSubHeadingVariant = HeadingCommonProps & {
-    variant?: Extract<HeadingVariant, 'subheading'>;
-    /**
-     * `size` cannot be used with variant="subheading". Either change to variant="regular" or remove size prop
-     */
-    size?: undefined;
-    weight?: keyof Pick<Theme$1['typography']['fonts']['weight'], 'bold'>;
-};
-/**
- * Conditionally changing props based on variant.
- * Overloads or union gives wrong intellisense.
- */
-declare type HeadingProps<T> = T extends {
-    variant: infer Variant;
-} ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
-declare const Heading: <T extends {
-    variant: HeadingVariant;
-}>({ variant, size, type, weight, contrast, children, }: HeadingProps<T>) => ReactElement;
-
-declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
-declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
-declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
-declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
-declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
-declare type BaseTextProps = {
-    id?: string;
-    color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
-    fontFamily?: keyof Theme$1['typography']['fonts']['family'];
-    fontSize?: keyof Theme$1['typography']['fonts']['size'];
-    fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
-    fontStyle?: 'italic' | 'normal';
-    textDecorationLine?: 'line-through' | 'none' | 'underline';
-    lineHeight?: keyof Theme$1['typography']['lineHeights'];
-    /**
-     * Web only
-     */
-    as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
-    textAlign?: 'center' | 'justify' | 'left' | 'right';
-    truncateAfterLines?: number;
-    className?: string;
-    style?: React.CSSProperties;
-    children: React.ReactNode;
-    accessibilityProps?: Partial<AccessibilityProps>;
-    /**
-     * React Native only
-     */
-    numberOfLines?: number;
-    componentName?: 'text' | 'title' | 'heading' | 'code';
-};
-
-declare type TextCommonProps = {
-    type?: TextTypes;
-    contrast?: ColorContrastTypes;
-    truncateAfterLines?: number;
-    children: React.ReactNode;
-    weight?: keyof Theme$1['typography']['fonts']['weight'];
-    /**
-     * **For Internal use only**:  Sets the color of the Text component
-     */
-    color?: BaseTextProps['color'];
-};
-declare type TextVariant = 'body' | 'caption';
-declare type TextBodyVariant = TextCommonProps & {
-    variant?: Extract<TextVariant, 'body'>;
-    size?: 'xsmall' | 'small' | 'medium';
-};
-declare type TextCaptionVariant = TextCommonProps & {
-    variant?: Extract<TextVariant, 'caption'>;
-    size?: 'medium';
-};
-/**
- * Conditionally changing props based on variant.
- * Overloads or union gives wrong intellisense.
- */
-declare type TextProps<T> = T extends {
-    variant: infer Variant;
-} ? Variant extends 'caption' ? TextCaptionVariant : Variant extends 'body' ? TextBodyVariant : T : T;
-declare type TextForwardedAs = {
-    forwardedAs?: BaseTextProps['as'];
-};
-declare const getTextProps: <T extends {
-    variant: TextVariant;
-}>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "size" | "variant" | "type" | "weight" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
-declare const Text: <T extends {
-    variant: TextVariant;
-}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
-
-declare type CodeProps = {
-    children: string;
-    /**
-     * Decides the fontSize and padding of Code
-     *
-     * @default small
-     */
-    size?: 'small' | 'medium';
-};
-/**
- * Code component can be used for displaying token, variable names, or inlined code snippets.
- *
- * ## Usage
- *
- * ### In Web
- * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
- *
- * ```tsx
- * <Text>
- *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
- * </Text>
- * ```
- *
- * ### In React Native
- *
- * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
- *
- * ```tsx
- *  <Box flexWrap="wrap" flexDirection="row" alignItems="flex-start">
- *   <Text>Lorem ipsum </Text>
- *   <Code>SENTRY_TOKEN</Code>
- *   <Text> normal text</Text>
- * </Box>
- * ```
- */
-declare const Code: ({ children, size }: CodeProps) => JSX.Element;
-
 declare type VisuallyHiddenProps = {
     children: React.ReactNode;
 };
 
 declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element;
 
+/**
+ * Screen reader class adapted from webaim
+ * https://webaim.org/techniques/css/invisiblecontent/#techniques
+ */
 declare const screenReaderStyles: CSSObject;
 
-export { ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, 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, LinkIcon, LinkProps, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, 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, 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, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, 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, useTheme };
+export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, 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, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, 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, 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, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, 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, useTheme };