@razorpay/blade 11.18.2 → 11.19.0

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

@@ -7,6 +7,8 @@ import { CSSObject } from 'styled-components';
 import { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';
 import { CurrencyCodeType } from '@razorpay/i18nify-js/currency';
 import * as csstype from 'csstype';
+import { DatePickerProps as DatePickerProps$1, DayOfWeek, DatesRangeValue } from '@mantine/dates';
+export { DateValue, DatesRangeValue } from '@mantine/dates';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
 import { CountryCodeType } from '@razorpay/i18nify-js';
 import { Toast } from 'react-hot-toast';
@@ -3733,13 +3735,14 @@ type BottomSheetBodyProps = {
      * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
      */
     padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.5'>;
+    overflow?: BaseBoxProps['overflow'];
 };
 
 declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trailing, showBackButton, onBackButtonClick, children, }: BottomSheetHeaderProps) => React__default.ReactElement;
 
 declare const BottomSheetFooter: ({ children }: BaseFooterProps) => React__default.ReactElement;
 
-declare const BottomSheetBody: ({ children, padding, }: BottomSheetBodyProps) => React__default.ReactElement;
+declare const BottomSheetBody: ({ children, padding, overflow, }: BottomSheetBodyProps) => React__default.ReactElement;
 
 declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, zIndex, }: BottomSheetProps) => React__default.ReactElement;
 
@@ -6241,641 +6244,1320 @@ declare const DrawerBody: ({ children }: {
     children: React__default.ReactNode;
 }) => React__default.ReactElement;
 
-type DropdownProps = {
+type FormInputLabelProps = {
     /**
-     * Control open / close state of the Dropdown component
-     *
-     * This can be used to close the dropdown when button in the footer of dropdown is clicked
+     * Label to be shown for the input field
      */
-    isOpen?: boolean;
+    label?: string;
     /**
-     * Callback when open state of the dropdown changes
+     * Desktop only prop. Default value on mobile will be `top`
      */
-    onOpenChange?: (isOpen: boolean) => void;
-    selectionType?: 'single' | 'multiple';
-    children: React__default.ReactNode[];
-} & TestID & StyledPropsBlade;
-type DropdownOverlayProps = {
-    children: React__default.ReactElement[] | React__default.ReactElement;
+    labelPosition?: 'left' | 'top';
     /**
-     * Sets the z-index of the DropdownOverlay
+     * Displays `(optional)` when `optional` is passed or `*` when `required` is passed
+     */
+    necessityIndicator?: 'required' | 'optional' | 'none';
+};
+
+type FormInputOnEvent = ({ name, value }: {
+    name?: string;
+    value?: string;
+}) => void;
+type FormInputHandleOnKeyDownEvent = ({ name, key, code, event, }: FormInputOnKeyDownEvent) => void;
+type FormInputOnKeyDownEvent = {
+    name?: string;
+    key?: string;
+    code?: string;
+    event: KeyboardEvent<HTMLInputElement>;
+};
+type FormInputValidationProps = {
+    /**
+     * Help text for the input
+     */
+    helpText?: string;
+    /**
+     * Error text for the input
      *
-     * @default 1001
+     * Renders when `validationState` is set to 'error'
      */
-    zIndex?: number;
-    width?: BoxProps['width'];
+    errorText?: string;
     /**
-     * Reference to the element which triggers the DropdownOverlay
+     * success text for the input
      *
-     * This is used to position the DropdownOverlay relative to a specific element,
-     * for example in PhoneNumberInput the DropdownOverlay is positioned relative to the input element
+     * Renders when `validationState` is set to 'success'
      */
-    referenceRef?: React__default.MutableRefObject<ContainerElementType | null>;
+    successText?: string;
     /**
-     * Sets the placement of the DropdownOverlay
+     * If `error`, the input is marked as invalid,
+     * and `invalid` attribute will be added
+     *
+     * If `success`, the input is marked as valid,
      *
-     * @default 'bottom-start'
      */
-    defaultPlacement?: Placement;
-} & TestID;
-
-declare const Dropdown: ({ children, isOpen: isOpenControlled, onOpenChange, selectionType, testID, ...styledProps }: DropdownProps) => React__default.ReactElement;
-
-declare const DropdownOverlay: ({ children, testID, zIndex, width, referenceRef, defaultPlacement, }: DropdownOverlayProps) => React__default.ReactElement | null;
-
-type DropdownButtonProps = ButtonProps & {
-    onBlur?: BaseButtonProps['onBlur'];
-    onKeyDown?: BaseButtonProps['onKeyDown'];
-};
-declare const DropdownButton: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, onBlur, onKeyDown, size, type, variant, accessibilityLabel, testID, ...styledProps }: DropdownButtonProps) => React__default.ReactElement;
-
-type DropdownLinkProps = LinkButtonVariantProps & {
-    onBlur?: BaseLinkProps['onBlur'];
-    onKeyDown?: BaseLinkProps['onKeyDown'];
+    validationState?: 'success' | 'error' | 'none';
 };
-declare const DropdownLink: ({ children, icon, iconPosition, onClick, onBlur, onKeyDown, isDisabled, href, target, rel, accessibilityLabel, size, testID, hitSlop, htmlTitle, ...styledProps }: DropdownLinkProps) => React__default.ReactElement;
-
-type DropdownHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'testID'>;
-declare const DropdownHeader: ({ title, subtitle, leading, titleSuffix, trailing, testID, }: DropdownHeaderProps) => React__default.ReactElement;
-type DropdownFooter = Pick<BaseFooterProps, 'children' | 'testID'>;
-declare const DropdownFooter: ({ children, testID }: DropdownFooter) => React__default.ReactElement;
 
-interface BladeFile extends File {
+type CommonAutoCompleteSuggestionTypes = 'none' | 'name' | 'email' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | 'telephone' | 'postalCode' | 'countryName' | 'creditCardNumber' | 'creditCardCSC' | 'creditCardExpiry' | 'creditCardExpiryMonth' | 'creditCardExpiryYear';
+type WebAutoCompleteSuggestionType = CommonAutoCompleteSuggestionTypes | 'on';
+type BaseInputCommonProps = FormInputLabelProps & FormInputValidationProps & {
     /**
-     * The unique identifier of the file.
+     * Determines if it needs to be rendered as input, textarea or button
      */
-    id?: string;
+    as?: 'input' | 'textarea' | 'button';
     /**
-     * The file's upload status.
+     * ID that will be used for accessibility
      */
-    status?: 'uploading' | 'success' | 'error';
+    id: string;
     /**
-     * The percentage of file upload completion.
+     * Placeholder text to be displayed inside the input field
      */
-    uploadPercent?: number;
+    placeholder?: string;
     /**
-     * Text indicating an error state
+     * Type of Input Field to be rendered.
+     *
+     * @default text
      */
-    errorText?: string;
-}
-type BladeFileList = BladeFile[];
-type FileUploadCommonProps = {
+    type?: 'text' | 'telephone' | 'email' | 'url' | 'number' | 'search' | 'password';
     /**
-     * Position of the label relative to the file upload area. Desktop only prop. Default value on mobile will be 'top'
+     * Used to set the default value of input field when it's uncontrolled
+     */
+    defaultValue?: string;
+    /**
+     * The name of the input field.
      *
-     * @default 'top'
+     * Useful in form submissions
      */
-    labelPosition?: 'top' | 'left';
+    name?: string;
     /**
-     * Defines the upload behavior of the FileUpload component
+     * The callback function to be invoked when the input field gets focus
      */
-    uploadType?: 'single' | 'multiple';
+    onFocus?: FormInputOnEvent;
     /**
-     * File types that can be accepted. See [input's accept attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)
-     *
-     * Usage: accept=".jpg, .png, .pdf", accept="image/*", accept="image/png, image/jpeg, application/pdf"
+     * The callback function to be invoked when the value of the input field changes
      */
-    accept?: string;
+    onChange?: FormInputOnEvent;
     /**
-     * Disables or enables the FileUpload component
+     * The callback function to be invoked when input is clicked
      */
-    isDisabled?: boolean;
+    onClick?: FormInputOnEvent;
     /**
-     * Sets the required state of the file input
+     * The callback function to be invoked when the value of the input field has any input
+     */
+    onInput?: FormInputOnEvent;
+    /**
+     * The callback function to be invoked whenever there is a keyDown event
+     */
+    onKeyDown?: FormInputHandleOnKeyDownEvent;
+    /**
+     * The callback function to be invoked when the the input field loses focus
      *
-     * @default false
+     * For React Native this will call `onEndEditing` event since we want to get the last value of the input field
      */
-    isRequired?: boolean;
+    onBlur?: FormInputOnEvent;
     /**
-     * Renders a necessity indicator after the label. If `isRequired` is `true`, it defaults to `'required'`
+     * Ignores the blur event animation (Used in Select to ignore blur animation when item in option is clicked)
      */
-    necessityIndicator?: 'required' | 'optional' | 'none';
+    shouldIgnoreBlurAnimation?: boolean;
     /**
-     * The name of the file upload input, [useful in form submissions](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
+     * sets boolean that ignores the blur animations on baseinput
      */
-    name?: string;
+    setShouldIgnoreBlurAnimation?: (shouldIgnoreBlurAnimation: boolean) => void;
     /**
-     * List of files that have been selected/uploaded, useful when the component is controlled
+     * Used to turn the input field to controlled so user can control the value
      */
-    fileList?: BladeFileList;
+    value?: string;
     /**
-     * Limit the number of files that can be uploaded
+     * Used to disable the input field
      */
-    maxCount?: number;
+    isDisabled?: boolean;
     /**
-     * Limit the size of the uploaded files (in bytes)
+     * If true, the input is marked as required, and `required` attribute will be added
      */
-    maxSize?: number;
+    isRequired?: boolean;
     /**
-     * Callback function triggered when files are selected
+     * Icon to be shown at the start of the input field
      */
-    onChange?: ({ name, fileList }: {
-        name?: string;
-        fileList: BladeFileList;
-    }) => void;
+    leadingIcon?: IconComponent;
     /**
-     * Callback function triggered when the preview icon is clicked
+     * Prefix symbol to be displayed at the beginning of the input field. If leadingIcon is provided it'll be placed after it
      */
-    onPreview?: ({ file }: {
-        file: File;
-    }) => void;
+    prefix?: string;
     /**
-     * Callback function triggered when a file is removed
+     * Element to be rendered before suffix. This is decided by the component which is extending BaseInput
+     *
+     * eg: consumers can render a loader or they could render a clear button
      */
-    onRemove?: ({ file }: {
-        file: File;
-    }) => void;
+    trailingInteractionElement?: ReactNode;
     /**
-     * Callback function triggered when a file upload is dismissed
+     * Element to be rendered before prefix. This is decided by the component which is extending BaseInput
+     *
+     * eg: consumers can render a country selector or button
      */
-    onDismiss?: ({ file }: {
-        file: File;
-    }) => void;
+    leadingInteractionElement?: ReactNode;
     /**
-     * Callback function executed when files are dropped into the upload area
+     * Suffix symbol to be displayed at the end of the input field. If trailingIcon is provided it'll be placed before it
      */
-    onDrop?: ({ name, fileList }: {
-        name?: string;
-        fileList: BladeFileList;
-    }) => void;
+    suffix?: string;
     /**
-     * State indicating whether there is an error in the FileUpload component
+     * Icon to be displayed at the end of the input field
      */
-    validationState?: 'none' | 'error';
+    trailingIcon?: IconComponent;
     /**
-     * Additional text providing assistance or guidance
+     * Displays the character counter under the input field
      */
-    helpText?: string;
+    maxCharacters?: number;
     /**
-     * Text indicating an error state
+     * alignment of the text inside input field
      */
-    errorText?: string;
+    textAlign?: 'left' | 'center' | 'right';
     /**
-     * Size of the FileUpload component
+     * If true, focuses the input field on load
      *
-     * @default 'medium'
+     * **Note:**
+     * Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments.
+     * When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.
      */
-    size?: 'medium' | 'large';
+    autoFocus?: boolean;
     /**
-     * Test ID for automation
+     * Hints the platform to display an appropriate virtual keyboard
+     *
+     * **Native:** Passes as is the `keyboardType` attribute
+     *
+     * **Web:** Passes the value to the `inputMode` attribute
      */
-    testID?: string;
-};
-type FileUploadPropsWithA11yLabel = {
+    keyboardType?: 'text' | 'search' | 'telephone' | 'email' | 'url' | 'decimal';
     /**
-     * Label to be shown for the input field
+     * determines what return key to show on the keyboard of mobile devices/virtual keyboard
+     * **Note**: Few values are platform dependent and might not render on all the platforms
+     *
+     * `default` is only available on native. it'll be mapped to `enter` for web
+     * `previous` is only available on native android
      */
-    label?: undefined;
+    keyboardReturnKeyType?: 'default' | 'go' | 'done' | 'next' | 'previous' | 'search' | 'send';
     /**
-     * Accessibility label for the input
+     * Element to be rendered on the trailing slot of input field label
      */
-    accessibilityLabel: string;
-};
-type FileUploadPropsWithLabel = {
+    trailingHeaderSlot?: (value?: string) => ReactNode;
     /**
-     * Label to be shown for the input field
+     * Element to be rendered on the trailing slot of input field footer
      */
-    label: string;
+    trailingFooterSlot?: (value?: string) => ReactNode;
     /**
-     * Accessibility label for the input
+     * Sets the textarea's number of lines
+     */
+    numberOfLines?: 2 | 3 | 4 | 5;
+    /**
+     * Sets the accessibility label for the input
      */
     accessibilityLabel?: string;
-};
-type FileUploadProps = (FileUploadPropsWithA11yLabel | FileUploadPropsWithLabel) & FileUploadCommonProps;
-
-/**
- * ### FileUpload Component
- *
- * The FileUpload component is used to handle file attachments, including the drag-and-drop interaction.
- * Primarily, it is used to upload files to a server or to display a list of uploaded files.
- *
- * ---
- *
- * #### Usage
- *
- * ```jsx
-  const GSTForm = () => {
-   const [selectedFile, setSelectedFile] = useState<BladeFile>();
-   const [isLoading, setIsLoading] = useState(false);
- 
-   return (
-    <Box>
-      <Heading marginBottom="spacing.4">Add GST Details</Heading>
-      <form encType="multipart/form-data" onSubmit={handleSubmit}>
-          <FileUpload
-            uploadType="single"
-            label="Upload GST"
-            helpText="Upload .jpg, .jpeg, or .png file only"
-            accept=".jpg, .jpeg, .png"
-            onChange={({ fileList }) => {
-              setSelectedFile(fileList[0]);
-            }}
-            onDrop={({ fileList }) => {
-              setSelectedFile(fileList[0]);
-            }}
-            isRequired
-            necessityIndicator="required"
-          />
-          <Button type="submit" variant="primary">
-            Submit
-          </Button>
-          {isLoading && (
-            <ProgressBar isIndeterminate label="Uploading your GST Certificate..." />
-          )}
-      </form>
-    </Box>
-   );
-  }
- * ```
- *
- *  ---
- *
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-fileupload FileUpload Documentation}
- *
- */
-declare const FileUpload: React$1.ForwardRefExoticComponent<FileUploadProps & React$1.RefAttributes<BladeElementRef>>;
-
-type IndicatorCommonProps = {
     /**
-     * Sets the color tone
+     * Sets the id of the label
      *
-     * @default neutral
+     * (Useful when assigning one label to multiple elements using aria-labelledby)
      */
-    color?: FeedbackColors | 'primary';
+    labelId?: string;
     /**
-     * Sets the emphasis of the indicator
+     * Can be used in select to set the id of the active descendant from the listbox
+     */
+    activeDescendant?: string;
+    /**
+     * Hides the label text
+     */
+    hideLabelText?: boolean;
+    /**
+     * Hides the form hint text
+     */
+    hideFormHint?: boolean;
+    /**
+     * componentName prop sets the data-blade-component attribute name
+     * 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;
+    setInputWrapperRef?: (node: ContainerElementType) => void;
+    /**
+     * sets the autocapitalize behavior for the input
+     */
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    /**
+     * constraints the height of input to given number rows
      *
-     * If set to intense it will show a background circle
+     * When set to expandable, input takes 1 row in the begining and expands to take 3 when active
      *
-     * @default subtle
+     * @default 'single'
      */
-    emphasis?: 'subtle' | 'intense';
+    maxTagRows?: 'single' | 'multiple' | 'expandable';
     /**
-     * Size of the indicator
-     *
-     * @default medium
+     * A slot for adding tags to input
      */
-    size?: 'small' | 'medium' | 'large';
-} & TestID & StyledPropsBlade;
-type IndicatorWithoutA11yLabel = {
+    tags?: React__default.ReactElement[] | null;
     /**
-     * A text label to show alongside the indicator dot
+     * Disables stripping of tags and shows all tags
      */
-    children: StringChildrenType;
+    showAllTags?: boolean;
     /**
-     * a11y label for screen readers
+     * State variable of active tag index
      */
-    accessibilityLabel?: string;
-};
-type IndicatorWithA11yLabel = {
+    activeTagIndex?: number;
     /**
-     * a11y label for screen readers
+     * Is this input SelectInput or AutoComplete
      */
-    accessibilityLabel: string;
+    isDropdownTrigger?: boolean;
     /**
-     * A text label to show alongside the indicator dot
+     * Is the label expected to be rendered inside input?
+     * Used in AutoComplete and Select when label can't exist outside
+     *
      */
-    children?: StringChildrenType;
-};
-type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
-declare const Indicator: ({ accessibilityLabel, children, size, color, emphasis, testID, ...styledProps }: IndicatorProps) => ReactElement;
-
-type FormInputLabelProps = {
+    isLabelInsideInput?: boolean;
+    /**
+     * State setter for active tag index
+     */
+    setActiveTagIndex?: (activeTagIndex: number) => void;
+    /**
+     * Sets the size of the input field
+     * @default medium
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Link button to be rendered at the end of the input field.
+     * **Note:** `size` of the Link will be set to the same size as the input field, `isDisabled` will follow Input's `isDisabled`, & `variant` will be set to `button`.
+     * Example:
+     * ```tsx
+     * trailingButton={<Link onClick={handleClick}>Apply</Link>}
+     * ```
+     */
+    trailingButton?: React__default.ReactElement<LinkProps>;
+    /**
+     * Whether to use Text or Heading component for Input text
+     * @default text
+     **/
+    valueComponentType?: 'text' | 'heading';
+} & TestID & Platform.Select<{
+    native: {
+        /**
+         * The callback function to be invoked when the value of the input field is submitted.
+         */
+        onSubmit?: FormInputOnEvent;
+        /**
+         * determines what autoComplete suggestion type to show
+         *
+         * Internally it'll render platform specific attributes:
+         *
+         * - web: `autocomplete`
+         * - iOS: `textContentType`
+         * - android: `autoComplete`
+         *
+         */
+        autoCompleteSuggestionType?: CommonAutoCompleteSuggestionTypes;
+    };
+    web: {
+        /**
+         * This is a react-native only prop and has no effect on web.
+         */
+        onSubmit?: undefined;
+        /**
+         * determines what autoComplete suggestion type to show
+         *
+         * Internally it'll render platform specific attributes:
+         *
+         * - web: `autocomplete`
+         * - iOS: `textContentType`
+         * - android: `autoComplete`
+         *
+         */
+        autoCompleteSuggestionType?: WebAutoCompleteSuggestionType;
+    };
+}> & StyledPropsBlade;
+type BaseInputPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
      */
-    label?: string;
+    label?: undefined;
     /**
-     * Desktop only prop. Default value on mobile will be `top`
+     * Accessibility label for the input
      */
-    labelPosition?: 'left' | 'top';
+    accessibilityLabel: string;
+};
+type BaseInputPropsWithLabel = {
     /**
-     * Displays `(optional)` when `optional` is passed or `*` when `required` is passed
+     * Label to be shown for the input field
      */
-    necessityIndicator?: 'required' | 'optional' | 'none';
+    label: string;
+    /**
+     * Accessibility label for the input
+     */
+    accessibilityLabel?: string;
 };
+type BaseInputProps = (BaseInputPropsWithA11yLabel | BaseInputPropsWithLabel) & BaseInputCommonProps;
 
-type FormInputOnEvent = ({ name, value }: {
-    name?: string;
-    value?: string;
-}) => void;
-type FormInputHandleOnKeyDownEvent = ({ name, key, code, event, }: FormInputOnKeyDownEvent) => void;
-type FormInputOnKeyDownEvent = {
-    name?: string;
-    key?: string;
-    code?: string;
-    event: KeyboardEvent<HTMLInputElement>;
+type TaggedInputProps = {
+    isTaggedInput?: boolean;
+    tags?: string[];
+    onTagChange?: ({ tags }: {
+        tags: string[];
+    }) => void;
 };
-type FormInputValidationProps = {
+
+type Type = Exclude<BaseInputProps['type'], 'password'>;
+type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | 'leadingIcon' | 'trailingButton' | 'trailingIcon'> & {
     /**
-     * Help text for the input
+     * Decides whether to render a clear icon button
      */
-    helpText?: string;
+    showClearButton?: boolean;
     /**
-     * Error text for the input
-     *
-     * Renders when `validationState` is set to 'error'
+     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
-    errorText?: string;
+    onClearButtonClick?: () => void;
     /**
-     * success text for the input
-     *
-     * Renders when `validationState` is set to 'success'
+     * Decides whether to show a loading spinner for the input field.
      */
-    successText?: string;
+    isLoading?: boolean;
     /**
-     * If `error`, the input is marked as invalid,
-     * and `invalid` attribute will be added
-     *
-     * If `success`, the input is marked as valid,
-     *
+     * Icon that will be rendered at the beginning of the input field
+     * @deprecated Use `leadingIcon` instead. This prop will be removed in the next major version.
      */
-    validationState?: 'success' | 'error' | 'none';
+    icon?: IconComponent;
+    /**
+     * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
+     *
+     *
+     * **Note on number type**
+     *
+     * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
+     * If you have a usecase where you only want to support number input, you can handle it on validations end.
+     *
+     * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning
+     *
+     * @default text
+     */
+    type?: Type;
+} & TaggedInputProps & StyledPropsBlade;
+type TextInputPropsWithA11yLabel = {
+    /**
+     * Label to be shown for the input field
+     */
+    label?: undefined;
+    /**
+     * Accessibility label for the input
+     */
+    accessibilityLabel: string;
+};
+type TextInputPropsWithLabel = {
+    /**
+     * Label to be shown for the input field
+     */
+    label: string;
+    /**
+     * Accessibility label for the input
+     */
+    accessibilityLabel?: string;
+};
+type TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) & TextInputCommonProps;
+declare const TextInput: React__default.ForwardRefExoticComponent<TextInputProps & React__default.RefAttributes<BladeElementRef>>;
+
+type Level = 'month' | 'year' | 'decade';
+type PickerType = 'day' | 'month' | 'year';
+type Preset = {
+    /**
+     * Label for the preset
+     *
+     * @example 'Last 7 days'
+     */
+    label: string;
+    /**
+     * Value can be a range of dates
+     *
+     * @example with range selection
+     * [dayjs().subtract(7, 'day'), dayjs()]
+     */
+    value: (date: Date) => DatesRangeValue;
+};
+type DateSelectionType = 'single' | 'range';
+type MantineInternalProps = '__onDayMouseEnter' | '__onDayClick' | 'getDayProps' | 'getYearControlProps' | 'getMonthControlProps' | 'onMouseLeave';
+type CalendarProps<SelectionType extends DateSelectionType> = Pick<DatePickerProps$1<SelectionType extends 'single' ? 'default' : 'range'>, MantineInternalProps | 'value' | 'defaultValue' | 'onChange' | 'onMonthSelect' | 'onYearSelect'> & {
+    /**
+     * Sets the selection mode of the calendar
+     * @default 'single'
+     */
+    selectionType?: SelectionType;
+    /**
+     * Sets the picker type
+     * @default 'date'
+     */
+    picker?: PickerType;
+    /**
+     * Sets the default picker type
+     */
+    defaultPicker?: PickerType;
+    /**
+     * Callback which fires when picker type changes
+     */
+    onPickerChange?: (picker: PickerType) => void;
+    /**
+     * Controlled isOpen state
+     */
+    isOpen?: boolean;
+    /**
+     * Uncontrolled isOpen state
+     */
+    defaultIsOpen?: boolean;
+    /**
+     * Callback which fires when isOpen state changes
+     */
+    onOpenChange?: ({ isOpen }: {
+        isOpen: boolean;
+    }) => void;
+    /**
+     * Defines presets for the date picker
+     *
+     * @example with single selection
+     * [
+     *   { label: 'In 7 days', value: dayjs().add(7, 'day') },
+     *   { label: 'In a month', value: dayjs().add(1, 'month') },
+     * ]
+     *
+     * @example with range selection
+     * [
+     *   { label: 'Last 7 days', value: [dayjs().subtract(7, 'day'), dayjs()] },
+     *   { label: 'Last month', value: [dayjs().subtract(1, 'month'), dayjs()] },
+     * ]
+     */
+    presets?: Preset[];
+    /**
+     * Sets the first day of the week in the calendar.
+     *
+     * 0-6 (0=Sunday, 1=Monday, etc.)
+     * @default 1
+     */
+    firstDayOfWeek?: DayOfWeek;
+    /**
+     * Sets the minimum date that can be selected.
+     */
+    minDate?: Date;
+    /**
+     * Sets the maximum date that can be selected.
+     */
+    maxDate?: Date;
+    /**
+     * Disables dates that do not pass the function.
+     */
+    excludeDate?: (date: Date) => boolean;
+    /**
+     * Determines whether single date can be selected as range, applicable only when type="range"
+     * @default false
+     */
+    allowSingleDateInRange?: boolean;
+    /**
+     * Callback which is called whenever the next button is clicked.
+     *
+     * @param date - The updated date.
+     * @param type - The level of the calendar. ("month" | "year" | "decade")
+     */
+    onNext?: ({ date, type }: {
+        date: Date;
+        type: Level;
+    }) => void;
+    /**
+     * Callback which is called whenever the previous button is clicked.
+     *
+     * @param date - The updated date.
+     * @param type - The level of the calendar. ("month" | "year" | "decade")
+     */
+    onPrevious?: ({ date, type }: {
+        date: Date;
+        type: Level;
+    }) => void;
+};
+type DatePickerProps<Type extends DateSelectionType> = Omit<CalendarProps<Type>, MantineInternalProps> & Omit<DatePickerCommonInputProps, 'inputRef' | 'referenceProps' | 'labelPosition' | 'name'> & {
+    /**
+     * Sets the label for the input element.
+     */
+    label?: Type extends 'single' ? string : {
+        start: string;
+        end?: string;
+    };
+    /**
+     * Sets the HTML [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) attribute on the input elements.
+     * Can be used when submitting a form.
+     *
+     * @example 'date' | { start: 'start-date', end: 'end-date' }
+     */
+    name?: Type extends 'single' ? string : {
+        start: string;
+        end?: string;
+    };
+    labelPosition?: BaseInputProps['labelPosition'];
 };
+type DatePickerCommonInputProps = {
+    labelPosition?: BaseInputProps['labelPosition'];
+    inputRef: React.Ref<any>;
+    referenceProps: any;
+} & Pick<TextInputProps, 'size' | 'isRequired' | 'necessityIndicator' | 'autoFocus' | 'isDisabled' | 'accessibilityLabel'> & FormInputValidationProps;
+
+declare const DatePicker: <Type extends DateSelectionType = "single">({ selectionType, allowSingleDateInRange, value, defaultValue, onChange, presets, isOpen, defaultIsOpen, onOpenChange, label, labelPosition, accessibilityLabel, errorText, helpText, isDisabled, isRequired, successText, validationState, size, autoFocus, necessityIndicator, name, defaultPicker, picker, onPickerChange, ...props }: Omit<CalendarProps<Type>, "onMouseLeave" | "__onDayMouseEnter" | "__onDayClick" | "getDayProps" | "getYearControlProps" | "getMonthControlProps"> & Omit<{
+    labelPosition?: "left" | "top" | undefined;
+    inputRef: React__default.Ref<any>;
+    referenceProps: any;
+} & Pick<TextInputProps, "size" | "autoFocus" | "isDisabled" | "accessibilityLabel" | "isRequired" | "necessityIndicator"> & FormInputValidationProps, "name" | "labelPosition" | "inputRef" | "referenceProps"> & {
+    label?: (Type extends "single" ? string : {
+        start: string;
+        end?: string | undefined;
+    }) | undefined;
+    name?: (Type extends "single" ? string : {
+        start: string;
+        end?: string | undefined;
+    }) | undefined;
+    labelPosition?: "left" | "top" | undefined;
+} & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+    bottom: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    left: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    position?: csstype.Property.Position | {
+        readonly base?: csstype.Property.Position | undefined;
+        readonly xs?: csstype.Property.Position | undefined;
+        readonly s?: csstype.Property.Position | undefined;
+        readonly m?: csstype.Property.Position | undefined;
+        readonly l?: csstype.Property.Position | undefined;
+        readonly xl?: csstype.Property.Position | undefined;
+    } | undefined;
+    right: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    top: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    zIndex?: csstype.Property.ZIndex | {
+        readonly base?: csstype.Property.ZIndex | undefined;
+        readonly xs?: csstype.Property.ZIndex | undefined;
+        readonly s?: csstype.Property.ZIndex | undefined;
+        readonly m?: csstype.Property.ZIndex | undefined;
+        readonly l?: csstype.Property.ZIndex | undefined;
+        readonly xl?: csstype.Property.ZIndex | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & Pick<{
+    gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | {
+        readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined;
+    } | undefined;
+    gridAutoFlow?: csstype.Property.GridAutoFlow | {
+        readonly base?: csstype.Property.GridAutoFlow | undefined;
+        readonly xs?: csstype.Property.GridAutoFlow | undefined;
+        readonly s?: csstype.Property.GridAutoFlow | undefined;
+        readonly m?: csstype.Property.GridAutoFlow | undefined;
+        readonly l?: csstype.Property.GridAutoFlow | undefined;
+        readonly xl?: csstype.Property.GridAutoFlow | undefined;
+    } | undefined;
+    gridAutoRows?: csstype.Property.GridAutoRows<string | number> | {
+        readonly base?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoRows<string | number> | undefined;
+    } | undefined;
+    gridColumnEnd?: csstype.Property.GridColumnEnd | {
+        readonly base?: csstype.Property.GridColumnEnd | undefined;
+        readonly xs?: csstype.Property.GridColumnEnd | undefined;
+        readonly s?: csstype.Property.GridColumnEnd | undefined;
+        readonly m?: csstype.Property.GridColumnEnd | undefined;
+        readonly l?: csstype.Property.GridColumnEnd | undefined;
+        readonly xl?: csstype.Property.GridColumnEnd | undefined;
+    } | undefined;
+    gridColumnStart?: csstype.Property.GridColumnStart | {
+        readonly base?: csstype.Property.GridColumnStart | undefined;
+        readonly xs?: csstype.Property.GridColumnStart | undefined;
+        readonly s?: csstype.Property.GridColumnStart | undefined;
+        readonly m?: csstype.Property.GridColumnStart | undefined;
+        readonly l?: csstype.Property.GridColumnStart | undefined;
+        readonly xl?: csstype.Property.GridColumnStart | undefined;
+    } | undefined;
+    gridRowEnd?: csstype.Property.GridRowEnd | {
+        readonly base?: csstype.Property.GridRowEnd | undefined;
+        readonly xs?: csstype.Property.GridRowEnd | undefined;
+        readonly s?: csstype.Property.GridRowEnd | undefined;
+        readonly m?: csstype.Property.GridRowEnd | undefined;
+        readonly l?: csstype.Property.GridRowEnd | undefined;
+        readonly xl?: csstype.Property.GridRowEnd | undefined;
+    } | undefined;
+    gridRowStart?: csstype.Property.GridRowStart | {
+        readonly base?: csstype.Property.GridRowStart | undefined;
+        readonly xs?: csstype.Property.GridRowStart | undefined;
+        readonly s?: csstype.Property.GridRowStart | undefined;
+        readonly m?: csstype.Property.GridRowStart | undefined;
+        readonly l?: csstype.Property.GridRowStart | undefined;
+        readonly xl?: csstype.Property.GridRowStart | undefined;
+    } | undefined;
+    gridTemplateAreas?: csstype.Property.GridTemplateAreas | {
+        readonly base?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xs?: csstype.Property.GridTemplateAreas | undefined;
+        readonly s?: csstype.Property.GridTemplateAreas | undefined;
+        readonly m?: csstype.Property.GridTemplateAreas | undefined;
+        readonly l?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xl?: csstype.Property.GridTemplateAreas | undefined;
+    } | undefined;
+    gridTemplateColumns?: csstype.Property.GridTemplateColumns<string | number> | {
+        readonly base?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+    } | undefined;
+    gridTemplateRows?: csstype.Property.GridTemplateRows<string | number> | {
+        readonly base?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateRows<string | number> | undefined;
+    } | undefined;
+    grid?: csstype.Property.Grid | {
+        readonly base?: csstype.Property.Grid | undefined;
+        readonly xs?: csstype.Property.Grid | undefined;
+        readonly s?: csstype.Property.Grid | undefined;
+        readonly m?: csstype.Property.Grid | undefined;
+        readonly l?: csstype.Property.Grid | undefined;
+        readonly xl?: csstype.Property.Grid | undefined;
+    } | undefined;
+    gridArea?: csstype.Property.GridArea | {
+        readonly base?: csstype.Property.GridArea | undefined;
+        readonly xs?: csstype.Property.GridArea | undefined;
+        readonly s?: csstype.Property.GridArea | undefined;
+        readonly m?: csstype.Property.GridArea | undefined;
+        readonly l?: csstype.Property.GridArea | undefined;
+        readonly xl?: csstype.Property.GridArea | undefined;
+    } | undefined;
+    gridColumn?: csstype.Property.GridColumn | {
+        readonly base?: csstype.Property.GridColumn | undefined;
+        readonly xs?: csstype.Property.GridColumn | undefined;
+        readonly s?: csstype.Property.GridColumn | undefined;
+        readonly m?: csstype.Property.GridColumn | undefined;
+        readonly l?: csstype.Property.GridColumn | undefined;
+        readonly xl?: csstype.Property.GridColumn | undefined;
+    } | undefined;
+    gridRow?: csstype.Property.GridRow | {
+        readonly base?: csstype.Property.GridRow | undefined;
+        readonly xs?: csstype.Property.GridRow | undefined;
+        readonly s?: csstype.Property.GridRow | undefined;
+        readonly m?: csstype.Property.GridRow | undefined;
+        readonly l?: csstype.Property.GridRow | undefined;
+        readonly xl?: csstype.Property.GridRow | undefined;
+    } | undefined;
+    gridTemplate?: csstype.Property.GridTemplate | {
+        readonly base?: csstype.Property.GridTemplate | undefined;
+        readonly xs?: csstype.Property.GridTemplate | undefined;
+        readonly s?: csstype.Property.GridTemplate | undefined;
+        readonly m?: csstype.Property.GridTemplate | undefined;
+        readonly l?: csstype.Property.GridTemplate | undefined;
+        readonly xl?: csstype.Property.GridTemplate | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow"> & Pick<{
+    width: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    display?: csstype.Property.Display | {
+        readonly base?: csstype.Property.Display | undefined;
+        readonly xs?: csstype.Property.Display | undefined;
+        readonly s?: csstype.Property.Display | undefined;
+        readonly m?: csstype.Property.Display | undefined;
+        readonly l?: csstype.Property.Display | undefined;
+        readonly xl?: csstype.Property.Display | undefined;
+    } | undefined;
+    height: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    maxHeight: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    maxWidth: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    minHeight: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    minWidth: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    overflowX?: csstype.Property.OverflowX | {
+        readonly base?: csstype.Property.OverflowX | undefined;
+        readonly xs?: csstype.Property.OverflowX | undefined;
+        readonly s?: csstype.Property.OverflowX | undefined;
+        readonly m?: csstype.Property.OverflowX | undefined;
+        readonly l?: csstype.Property.OverflowX | undefined;
+        readonly xl?: csstype.Property.OverflowX | undefined;
+    } | undefined;
+    overflowY?: csstype.Property.OverflowY | {
+        readonly base?: csstype.Property.OverflowY | undefined;
+        readonly xs?: csstype.Property.OverflowY | undefined;
+        readonly s?: csstype.Property.OverflowY | undefined;
+        readonly m?: csstype.Property.OverflowY | undefined;
+        readonly l?: csstype.Property.OverflowY | undefined;
+        readonly xl?: csstype.Property.OverflowY | undefined;
+    } | undefined;
+    textAlign?: csstype.Property.TextAlign | {
+        readonly base?: csstype.Property.TextAlign | undefined;
+        readonly xs?: csstype.Property.TextAlign | undefined;
+        readonly s?: csstype.Property.TextAlign | undefined;
+        readonly m?: csstype.Property.TextAlign | undefined;
+        readonly l?: csstype.Property.TextAlign | undefined;
+        readonly xl?: csstype.Property.TextAlign | undefined;
+    } | undefined;
+    whiteSpace?: csstype.Property.WhiteSpace | {
+        readonly base?: csstype.Property.WhiteSpace | undefined;
+        readonly xs?: csstype.Property.WhiteSpace | undefined;
+        readonly s?: csstype.Property.WhiteSpace | undefined;
+        readonly m?: csstype.Property.WhiteSpace | undefined;
+        readonly l?: csstype.Property.WhiteSpace | undefined;
+        readonly xl?: csstype.Property.WhiteSpace | undefined;
+    } | undefined;
+    overflow?: csstype.Property.Overflow | {
+        readonly base?: csstype.Property.Overflow | undefined;
+        readonly xs?: csstype.Property.Overflow | undefined;
+        readonly s?: csstype.Property.Overflow | undefined;
+        readonly m?: csstype.Property.Overflow | undefined;
+        readonly l?: csstype.Property.Overflow | undefined;
+        readonly xl?: csstype.Property.Overflow | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "display"> & Pick<{
+    elevation?: ElevationLevels | {
+        readonly base?: ElevationLevels | undefined;
+        readonly xs?: ElevationLevels | undefined;
+        readonly s?: ElevationLevels | undefined;
+        readonly m?: ElevationLevels | undefined;
+        readonly l?: ElevationLevels | undefined;
+        readonly xl?: ElevationLevels | undefined;
+    } | undefined;
+    backgroundImage?: csstype.Property.BackgroundImage | {
+        readonly base?: csstype.Property.BackgroundImage | undefined;
+        readonly xs?: csstype.Property.BackgroundImage | undefined;
+        readonly s?: csstype.Property.BackgroundImage | undefined;
+        readonly m?: csstype.Property.BackgroundImage | undefined;
+        readonly l?: csstype.Property.BackgroundImage | undefined;
+        readonly xl?: csstype.Property.BackgroundImage | undefined;
+    } | undefined;
+    backgroundOrigin?: csstype.Property.BackgroundOrigin | {
+        readonly base?: csstype.Property.BackgroundOrigin | undefined;
+        readonly xs?: csstype.Property.BackgroundOrigin | undefined;
+        readonly s?: csstype.Property.BackgroundOrigin | undefined;
+        readonly m?: csstype.Property.BackgroundOrigin | undefined;
+        readonly l?: csstype.Property.BackgroundOrigin | undefined;
+        readonly xl?: csstype.Property.BackgroundOrigin | undefined;
+    } | undefined;
+    backgroundRepeat?: csstype.Property.BackgroundRepeat | {
+        readonly base?: csstype.Property.BackgroundRepeat | undefined;
+        readonly xs?: csstype.Property.BackgroundRepeat | undefined;
+        readonly s?: csstype.Property.BackgroundRepeat | undefined;
+        readonly m?: csstype.Property.BackgroundRepeat | undefined;
+        readonly l?: csstype.Property.BackgroundRepeat | undefined;
+        readonly xl?: csstype.Property.BackgroundRepeat | undefined;
+    } | undefined;
+    backgroundSize?: csstype.Property.BackgroundSize<string | number> | {
+        readonly base?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly xs?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly s?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly m?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly l?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly xl?: csstype.Property.BackgroundSize<string | number> | undefined;
+    } | undefined;
+    borderBottomColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderBottomLeftRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderBottomRightRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderBottomStyle?: csstype.Property.BorderBottomStyle | {
+        readonly base?: csstype.Property.BorderBottomStyle | undefined;
+        readonly xs?: csstype.Property.BorderBottomStyle | undefined;
+        readonly s?: csstype.Property.BorderBottomStyle | undefined;
+        readonly m?: csstype.Property.BorderBottomStyle | undefined;
+        readonly l?: csstype.Property.BorderBottomStyle | undefined;
+        readonly xl?: csstype.Property.BorderBottomStyle | undefined;
+    } | undefined;
+    borderBottomWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    borderLeftColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderLeftStyle?: csstype.Property.BorderLeftStyle | {
+        readonly base?: csstype.Property.BorderLeftStyle | undefined;
+        readonly xs?: csstype.Property.BorderLeftStyle | undefined;
+        readonly s?: csstype.Property.BorderLeftStyle | undefined;
+        readonly m?: csstype.Property.BorderLeftStyle | undefined;
+        readonly l?: csstype.Property.BorderLeftStyle | undefined;
+        readonly xl?: csstype.Property.BorderLeftStyle | undefined;
+    } | undefined;
+    borderLeftWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    borderRightColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderRightStyle?: csstype.Property.BorderRightStyle | {
+        readonly base?: csstype.Property.BorderRightStyle | undefined;
+        readonly xs?: csstype.Property.BorderRightStyle | undefined;
+        readonly s?: csstype.Property.BorderRightStyle | undefined;
+        readonly m?: csstype.Property.BorderRightStyle | undefined;
+        readonly l?: csstype.Property.BorderRightStyle | undefined;
+        readonly xl?: csstype.Property.BorderRightStyle | undefined;
+    } | undefined;
+    borderRightWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    borderTopColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderTopLeftRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderTopRightRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderTopStyle?: csstype.Property.BorderTopStyle | {
+        readonly base?: csstype.Property.BorderTopStyle | undefined;
+        readonly xs?: csstype.Property.BorderTopStyle | undefined;
+        readonly s?: csstype.Property.BorderTopStyle | undefined;
+        readonly m?: csstype.Property.BorderTopStyle | undefined;
+        readonly l?: csstype.Property.BorderTopStyle | undefined;
+        readonly xl?: csstype.Property.BorderTopStyle | undefined;
+    } | undefined;
+    borderTopWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    clipPath?: csstype.Property.ClipPath | {
+        readonly base?: csstype.Property.ClipPath | undefined;
+        readonly xs?: csstype.Property.ClipPath | undefined;
+        readonly s?: csstype.Property.ClipPath | undefined;
+        readonly m?: csstype.Property.ClipPath | undefined;
+        readonly l?: csstype.Property.ClipPath | undefined;
+        readonly xl?: csstype.Property.ClipPath | undefined;
+    } | undefined;
+    opacity?: csstype.Property.Opacity | {
+        readonly base?: csstype.Property.Opacity | undefined;
+        readonly xs?: csstype.Property.Opacity | undefined;
+        readonly s?: csstype.Property.Opacity | undefined;
+        readonly m?: csstype.Property.Opacity | undefined;
+        readonly l?: csstype.Property.Opacity | undefined;
+        readonly xl?: csstype.Property.Opacity | undefined;
+    } | undefined;
+    pointerEvents?: csstype.Property.PointerEvents | {
+        readonly base?: csstype.Property.PointerEvents | undefined;
+        readonly xs?: csstype.Property.PointerEvents | undefined;
+        readonly s?: csstype.Property.PointerEvents | undefined;
+        readonly m?: csstype.Property.PointerEvents | undefined;
+        readonly l?: csstype.Property.PointerEvents | undefined;
+        readonly xl?: csstype.Property.PointerEvents | undefined;
+    } | undefined;
+    transform?: csstype.Property.Transform | {
+        readonly base?: csstype.Property.Transform | undefined;
+        readonly xs?: csstype.Property.Transform | undefined;
+        readonly s?: csstype.Property.Transform | undefined;
+        readonly m?: csstype.Property.Transform | undefined;
+        readonly l?: csstype.Property.Transform | undefined;
+        readonly xl?: csstype.Property.Transform | undefined;
+    } | undefined;
+    transformOrigin?: csstype.Property.TransformOrigin<string | number> | {
+        readonly base?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xs?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly s?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly m?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly l?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xl?: csstype.Property.TransformOrigin<string | number> | undefined;
+    } | undefined;
+    visibility?: csstype.Property.Visibility | {
+        readonly base?: csstype.Property.Visibility | undefined;
+        readonly xs?: csstype.Property.Visibility | undefined;
+        readonly s?: csstype.Property.Visibility | undefined;
+        readonly m?: csstype.Property.Visibility | undefined;
+        readonly l?: csstype.Property.Visibility | undefined;
+        readonly xl?: csstype.Property.Visibility | undefined;
+    } | undefined;
+    backgroundPosition?: csstype.Property.BackgroundPosition<string | number> | {
+        readonly base?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly xs?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly s?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly m?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly l?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly xl?: csstype.Property.BackgroundPosition<string | number> | undefined;
+    } | undefined;
+    borderColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderStyle?: csstype.Property.BorderStyle | {
+        readonly base?: csstype.Property.BorderStyle | undefined;
+        readonly xs?: csstype.Property.BorderStyle | undefined;
+        readonly s?: csstype.Property.BorderStyle | undefined;
+        readonly m?: csstype.Property.BorderStyle | undefined;
+        readonly l?: csstype.Property.BorderStyle | undefined;
+        readonly xl?: csstype.Property.BorderStyle | undefined;
+    } | undefined;
+    borderWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "visibility">, "__brand__">>) => React__default.ReactElement;
 
-type CommonAutoCompleteSuggestionTypes = 'none' | 'name' | 'email' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | 'telephone' | 'postalCode' | 'countryName' | 'creditCardNumber' | 'creditCardCSC' | 'creditCardExpiry' | 'creditCardExpiryMonth' | 'creditCardExpiryYear';
-type WebAutoCompleteSuggestionType = CommonAutoCompleteSuggestionTypes | 'on';
-type BaseInputCommonProps = FormInputLabelProps & FormInputValidationProps & {
-    /**
-     * Determines if it needs to be rendered as input, textarea or button
-     */
-    as?: 'input' | 'textarea' | 'button';
-    /**
-     * ID that will be used for accessibility
-     */
-    id: string;
-    /**
-     * Placeholder text to be displayed inside the input field
-     */
-    placeholder?: string;
-    /**
-     * Type of Input Field to be rendered.
-     *
-     * @default text
-     */
-    type?: 'text' | 'telephone' | 'email' | 'url' | 'number' | 'search' | 'password';
-    /**
-     * Used to set the default value of input field when it's uncontrolled
-     */
-    defaultValue?: string;
+type DropdownProps = {
     /**
-     * The name of the input field.
+     * Control open / close state of the Dropdown component
      *
-     * Useful in form submissions
-     */
-    name?: string;
-    /**
-     * The callback function to be invoked when the input field gets focus
-     */
-    onFocus?: FormInputOnEvent;
-    /**
-     * 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
+     * This can be used to close the dropdown when button in the footer of dropdown is clicked
      */
-    onInput?: FormInputOnEvent;
+    isOpen?: boolean;
     /**
-     * The callback function to be invoked whenever there is a keyDown event
+     * Callback when open state of the dropdown changes
      */
-    onKeyDown?: FormInputHandleOnKeyDownEvent;
+    onOpenChange?: (isOpen: boolean) => void;
+    selectionType?: 'single' | 'multiple';
+    children: React__default.ReactNode[];
+} & TestID & StyledPropsBlade;
+type DropdownOverlayProps = {
+    children: React__default.ReactElement[] | React__default.ReactElement;
     /**
-     * The callback function to be invoked when the the input field loses focus
+     * Sets the z-index of the DropdownOverlay
      *
-     * 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;
-    /**
-     * sets boolean that ignores the blur animations on baseinput
-     */
-    setShouldIgnoreBlurAnimation?: (shouldIgnoreBlurAnimation: boolean) => void;
-    /**
-     * Used to turn the input field to controlled so user can control the value
-     */
-    value?: string;
-    /**
-     * Used to disable the input field
-     */
-    isDisabled?: boolean;
-    /**
-     * If true, the input is marked as required, and `required` attribute will be added
-     */
-    isRequired?: boolean;
-    /**
-     * Icon to be shown at the start of the input field
-     */
-    leadingIcon?: IconComponent;
-    /**
-     * Prefix symbol to be displayed at the beginning of the input field. If leadingIcon is provided it'll be placed after it
+     * @default 1001
      */
-    prefix?: string;
+    zIndex?: number;
+    width?: BoxProps['width'];
     /**
-     * Element to be rendered before suffix. This is decided by the component which is extending BaseInput
+     * Reference to the element which triggers the DropdownOverlay
      *
-     * eg: consumers can render a loader or they could render a clear button
+     * This is used to position the DropdownOverlay relative to a specific element,
+     * for example in PhoneNumberInput the DropdownOverlay is positioned relative to the input element
      */
-    trailingInteractionElement?: ReactNode;
+    referenceRef?: React__default.MutableRefObject<ContainerElementType | null>;
     /**
-     * Element to be rendered before prefix. This is decided by the component which is extending BaseInput
+     * Sets the placement of the DropdownOverlay
      *
-     * eg: consumers can render a country selector or button
+     * @default 'bottom-start'
      */
-    leadingInteractionElement?: ReactNode;
+    defaultPlacement?: Placement;
+} & TestID;
+
+declare const Dropdown: ({ children, isOpen: isOpenControlled, onOpenChange, selectionType, testID, ...styledProps }: DropdownProps) => React__default.ReactElement;
+
+declare const DropdownOverlay: ({ children, testID, zIndex, width, referenceRef, defaultPlacement, }: DropdownOverlayProps) => React__default.ReactElement | null;
+
+type DropdownButtonProps = ButtonProps & {
+    onBlur?: BaseButtonProps['onBlur'];
+    onKeyDown?: BaseButtonProps['onKeyDown'];
+};
+declare const DropdownButton: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, onBlur, onKeyDown, size, type, variant, accessibilityLabel, testID, ...styledProps }: DropdownButtonProps) => React__default.ReactElement;
+
+type DropdownLinkProps = LinkButtonVariantProps & {
+    onBlur?: BaseLinkProps['onBlur'];
+    onKeyDown?: BaseLinkProps['onKeyDown'];
+};
+declare const DropdownLink: ({ children, icon, iconPosition, onClick, onBlur, onKeyDown, isDisabled, href, target, rel, accessibilityLabel, size, testID, hitSlop, htmlTitle, ...styledProps }: DropdownLinkProps) => React__default.ReactElement;
+
+type DropdownHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'testID'>;
+declare const DropdownHeader: ({ title, subtitle, leading, titleSuffix, trailing, testID, }: DropdownHeaderProps) => React__default.ReactElement;
+type DropdownFooter = Pick<BaseFooterProps, 'children' | 'testID'>;
+declare const DropdownFooter: ({ children, testID }: DropdownFooter) => React__default.ReactElement;
+
+interface BladeFile extends File {
     /**
-     * Suffix symbol to be displayed at the end of the input field. If trailingIcon is provided it'll be placed before it
+     * The unique identifier of the file.
      */
-    suffix?: string;
+    id?: string;
     /**
-     * Icon to be displayed at the end of the input field
+     * The file's upload status.
      */
-    trailingIcon?: IconComponent;
+    status?: 'uploading' | 'success' | 'error';
     /**
-     * Displays the character counter under the input field
+     * The percentage of file upload completion.
      */
-    maxCharacters?: number;
+    uploadPercent?: number;
     /**
-     * alignment of the text inside input field
+     * Text indicating an error state
      */
-    textAlign?: 'left' | 'center' | 'right';
+    errorText?: string;
+}
+type BladeFileList = BladeFile[];
+type FileUploadCommonProps = {
     /**
-     * If true, focuses the input field on load
+     * Position of the label relative to the file upload area. Desktop only prop. Default value on mobile will be 'top'
      *
-     * **Note:**
-     * Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments.
-     * When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.
+     * @default 'top'
      */
-    autoFocus?: boolean;
+    labelPosition?: 'top' | 'left';
     /**
-     * Hints the platform to display an appropriate virtual keyboard
-     *
-     * **Native:** Passes as is the `keyboardType` attribute
-     *
-     * **Web:** Passes the value to the `inputMode` attribute
+     * Defines the upload behavior of the FileUpload component
      */
-    keyboardType?: 'text' | 'search' | 'telephone' | 'email' | 'url' | 'decimal';
+    uploadType?: 'single' | 'multiple';
     /**
-     * determines what return key to show on the keyboard of mobile devices/virtual keyboard
-     * **Note**: Few values are platform dependent and might not render on all the platforms
+     * File types that can be accepted. See [input's accept attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)
      *
-     * `default` is only available on native. it'll be mapped to `enter` for web
-     * `previous` is only available on native android
-     */
-    keyboardReturnKeyType?: 'default' | 'go' | 'done' | 'next' | 'previous' | 'search' | 'send';
-    /**
-     * Element to be rendered on the trailing slot of input field label
-     */
-    trailingHeaderSlot?: (value?: string) => ReactNode;
-    /**
-     * Element to be rendered on the trailing slot of input field footer
-     */
-    trailingFooterSlot?: (value?: string) => ReactNode;
-    /**
-     * Sets the textarea's number of lines
+     * Usage: accept=".jpg, .png, .pdf", accept="image/*", accept="image/png, image/jpeg, application/pdf"
      */
-    numberOfLines?: 2 | 3 | 4 | 5;
+    accept?: string;
     /**
-     * Sets the accessibility label for the input
+     * Disables or enables the FileUpload component
      */
-    accessibilityLabel?: string;
+    isDisabled?: boolean;
     /**
-     * Sets the id of the label
+     * Sets the required state of the file input
      *
-     * (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
+     * @default false
      */
-    hideLabelText?: boolean;
+    isRequired?: boolean;
     /**
-     * Hides the form hint text
+     * Renders a necessity indicator after the label. If `isRequired` is `true`, it defaults to `'required'`
      */
-    hideFormHint?: boolean;
+    necessityIndicator?: 'required' | 'optional' | 'none';
     /**
-     * componentName prop sets the data-blade-component attribute name
-     * for internal metric collection purposes
+     * The name of the file upload input, [useful in form submissions](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
      */
-    componentName?: string;
+    name?: string;
     /**
-     * whether the input has a popup
+     * List of files that have been selected/uploaded, useful when the component is controlled
      */
-    hasPopup?: AriaAttributes['hasPopup'];
+    fileList?: BladeFileList;
     /**
-     * id of the popup
+     * Limit the number of files that can be uploaded
      */
-    popupId?: string;
+    maxCount?: number;
     /**
-     * true if popup is in expanded state
+     * Limit the size of the uploaded files (in bytes)
      */
-    isPopupExpanded?: boolean;
-    setInputWrapperRef?: (node: ContainerElementType) => void;
+    maxSize?: number;
     /**
-     * sets the autocapitalize behavior for the input
+     * Callback function triggered when files are selected
      */
-    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    onChange?: ({ name, fileList }: {
+        name?: string;
+        fileList: BladeFileList;
+    }) => void;
     /**
-     * constraints the height of input to given number rows
-     *
-     * When set to expandable, input takes 1 row in the begining and expands to take 3 when active
-     *
-     * @default 'single'
+     * Callback function triggered when the preview icon is clicked
      */
-    maxTagRows?: 'single' | 'multiple' | 'expandable';
+    onPreview?: ({ file }: {
+        file: File;
+    }) => void;
     /**
-     * A slot for adding tags to input
+     * Callback function triggered when a file is removed
      */
-    tags?: React__default.ReactElement[] | null;
+    onRemove?: ({ file }: {
+        file: File;
+    }) => void;
     /**
-     * Disables stripping of tags and shows all tags
+     * Callback function triggered when a file upload is dismissed
      */
-    showAllTags?: boolean;
+    onDismiss?: ({ file }: {
+        file: File;
+    }) => void;
     /**
-     * State variable of active tag index
+     * Callback function executed when files are dropped into the upload area
      */
-    activeTagIndex?: number;
+    onDrop?: ({ name, fileList }: {
+        name?: string;
+        fileList: BladeFileList;
+    }) => void;
     /**
-     * Is this input SelectInput or AutoComplete
+     * State indicating whether there is an error in the FileUpload component
      */
-    isDropdownTrigger?: boolean;
+    validationState?: 'none' | 'error';
     /**
-     * Is the label expected to be rendered inside input?
-     * Used in AutoComplete and Select when label can't exist outside
-     *
+     * Additional text providing assistance or guidance
      */
-    isLabelInsideInput?: boolean;
+    helpText?: string;
     /**
-     * State setter for active tag index
+     * Text indicating an error state
      */
-    setActiveTagIndex?: (activeTagIndex: number) => void;
+    errorText?: string;
     /**
-     * Sets the size of the input field
-     * @default medium
+     * Size of the FileUpload component
+     *
+     * @default 'medium'
      */
     size?: 'medium' | 'large';
     /**
-     * Link button to be rendered at the end of the input field.
-     * **Note:** `size` of the Link will be set to the same size as the input field, `isDisabled` will follow Input's `isDisabled`, & `variant` will be set to `button`.
-     * Example:
-     * ```tsx
-     * trailingButton={<Link onClick={handleClick}>Apply</Link>}
-     * ```
+     * Test ID for automation
      */
-    trailingButton?: React__default.ReactElement<LinkProps>;
-    /**
-     * Whether to use Text or Heading component for Input text
-     * @default text
-     **/
-    valueComponentType?: 'text' | 'heading';
-} & TestID & Platform.Select<{
-    native: {
-        /**
-         * The callback function to be invoked when the value of the input field is submitted.
-         */
-        onSubmit?: FormInputOnEvent;
-        /**
-         * determines what autoComplete suggestion type to show
-         *
-         * Internally it'll render platform specific attributes:
-         *
-         * - web: `autocomplete`
-         * - iOS: `textContentType`
-         * - android: `autoComplete`
-         *
-         */
-        autoCompleteSuggestionType?: CommonAutoCompleteSuggestionTypes;
-    };
-    web: {
-        /**
-         * This is a react-native only prop and has no effect on web.
-         */
-        onSubmit?: undefined;
-        /**
-         * determines what autoComplete suggestion type to show
-         *
-         * Internally it'll render platform specific attributes:
-         *
-         * - web: `autocomplete`
-         * - iOS: `textContentType`
-         * - android: `autoComplete`
-         *
-         */
-        autoCompleteSuggestionType?: WebAutoCompleteSuggestionType;
-    };
-}> & StyledPropsBlade;
-type BaseInputPropsWithA11yLabel = {
+    testID?: string;
+};
+type FileUploadPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
      */
@@ -6885,7 +7567,7 @@ type BaseInputPropsWithA11yLabel = {
      */
     accessibilityLabel: string;
 };
-type BaseInputPropsWithLabel = {
+type FileUploadPropsWithLabel = {
     /**
      * Label to be shown for the input field
      */
@@ -6895,7 +7577,104 @@ type BaseInputPropsWithLabel = {
      */
     accessibilityLabel?: string;
 };
-type BaseInputProps = (BaseInputPropsWithA11yLabel | BaseInputPropsWithLabel) & BaseInputCommonProps;
+type FileUploadProps = (FileUploadPropsWithA11yLabel | FileUploadPropsWithLabel) & FileUploadCommonProps;
+
+/**
+ * ### FileUpload Component
+ *
+ * The FileUpload component is used to handle file attachments, including the drag-and-drop interaction.
+ * Primarily, it is used to upload files to a server or to display a list of uploaded files.
+ *
+ * ---
+ *
+ * #### Usage
+ *
+ * ```jsx
+  const GSTForm = () => {
+   const [selectedFile, setSelectedFile] = useState<BladeFile>();
+   const [isLoading, setIsLoading] = useState(false);
+ 
+   return (
+    <Box>
+      <Heading marginBottom="spacing.4">Add GST Details</Heading>
+      <form encType="multipart/form-data" onSubmit={handleSubmit}>
+          <FileUpload
+            uploadType="single"
+            label="Upload GST"
+            helpText="Upload .jpg, .jpeg, or .png file only"
+            accept=".jpg, .jpeg, .png"
+            onChange={({ fileList }) => {
+              setSelectedFile(fileList[0]);
+            }}
+            onDrop={({ fileList }) => {
+              setSelectedFile(fileList[0]);
+            }}
+            isRequired
+            necessityIndicator="required"
+          />
+          <Button type="submit" variant="primary">
+            Submit
+          </Button>
+          {isLoading && (
+            <ProgressBar isIndeterminate label="Uploading your GST Certificate..." />
+          )}
+      </form>
+    </Box>
+   );
+  }
+ * ```
+ *
+ *  ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-fileupload FileUpload Documentation}
+ *
+ */
+declare const FileUpload: React$1.ForwardRefExoticComponent<FileUploadProps & React$1.RefAttributes<BladeElementRef>>;
+
+type IndicatorCommonProps = {
+    /**
+     * Sets the color tone
+     *
+     * @default neutral
+     */
+    color?: FeedbackColors | 'primary';
+    /**
+     * Sets the emphasis of the indicator
+     *
+     * If set to intense it will show a background circle
+     *
+     * @default subtle
+     */
+    emphasis?: 'subtle' | 'intense';
+    /**
+     * Size of the indicator
+     *
+     * @default medium
+     */
+    size?: 'small' | 'medium' | 'large';
+} & TestID & StyledPropsBlade;
+type IndicatorWithoutA11yLabel = {
+    /**
+     * A text label to show alongside the indicator dot
+     */
+    children: StringChildrenType;
+    /**
+     * a11y label for screen readers
+     */
+    accessibilityLabel?: string;
+};
+type IndicatorWithA11yLabel = {
+    /**
+     * a11y label for screen readers
+     */
+    accessibilityLabel: string;
+    /**
+     * A text label to show alongside the indicator dot
+     */
+    children?: StringChildrenType;
+};
+type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
+declare const Indicator: ({ accessibilityLabel, children, size, color, emphasis, testID, ...styledProps }: IndicatorProps) => ReactElement;
 
 /**
  * ### SelectInput
@@ -7207,14 +7986,6 @@ type PasswordInputPropsWithLabel = {
 type PasswordInputProps = (PasswordInputPropsWithA11yLabel | PasswordInputPropsWithLabel) & PasswordInputCommonProps;
 declare const PasswordInput: React__default.ForwardRefExoticComponent<PasswordInputProps & React__default.RefAttributes<BladeElementRef>>;
 
-type TaggedInputProps = {
-    isTaggedInput?: boolean;
-    tags?: string[];
-    onTagChange?: ({ tags }: {
-        tags: string[];
-    }) => void;
-};
-
 type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID' | 'size'> & {
     /**
      * Decides whether to render a clear icon button
@@ -7248,63 +8019,6 @@ type TextAreaPropsWithLabel = {
 type TextAreaProps = (TextAreaPropsWithA11yLabel | TextAreaPropsWithLabel) & TextAreaCommonProps;
 declare const TextArea: React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<BladeElementRef>>;
 
-type Type = Exclude<BaseInputProps['type'], 'password'>;
-type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | 'leadingIcon' | 'trailingButton' | 'trailingIcon'> & {
-    /**
-     * Decides whether to render a clear icon button
-     */
-    showClearButton?: boolean;
-    /**
-     * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
-     */
-    onClearButtonClick?: () => void;
-    /**
-     * Decides whether to show a loading spinner for the input field.
-     */
-    isLoading?: boolean;
-    /**
-     * Icon that will be rendered at the beginning of the input field
-     * @deprecated Use `leadingIcon` instead. This prop will be removed in the next major version.
-     */
-    icon?: IconComponent;
-    /**
-     * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
-     *
-     *
-     * **Note on number type**
-     *
-     * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
-     * If you have a usecase where you only want to support number input, you can handle it on validations end.
-     *
-     * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning
-     *
-     * @default text
-     */
-    type?: Type;
-} & TaggedInputProps & StyledPropsBlade;
-type TextInputPropsWithA11yLabel = {
-    /**
-     * Label to be shown for the input field
-     */
-    label?: undefined;
-    /**
-     * Accessibility label for the input
-     */
-    accessibilityLabel: string;
-};
-type TextInputPropsWithLabel = {
-    /**
-     * Label to be shown for the input field
-     */
-    label: string;
-    /**
-     * Accessibility label for the input
-     */
-    accessibilityLabel?: string;
-};
-type TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) & TextInputCommonProps;
-declare const TextInput: React__default.ForwardRefExoticComponent<TextInputProps & React__default.RefAttributes<BladeElementRef>>;
-
 type SearchInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'helpText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'autoFocus' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size'> & {
     /**
      * Event handler to handle the onClick event for clear button.
@@ -7917,6 +8631,7 @@ declare const PhoneNumberInput: React__default.ForwardRefExoticComponent<Partial
     size?: "medium" | "large" | undefined;
     onBlur?: FormInputOnEvent | undefined;
     onFocus?: FormInputOnEvent | undefined;
+    placeholder?: string | undefined;
     onClick?: FormInputOnEvent | undefined;
     defaultValue?: string | undefined;
     autoFocus?: boolean | undefined;
@@ -7954,7 +8669,7 @@ declare const PhoneNumberInput: React__default.ForwardRefExoticComponent<Partial
     onClearButtonClick?: (() => void) | undefined;
 } & React__default.RefAttributes<BladeElementRef>>;
 
-type CommonProps = Pick<BaseInputProps, 'size' | 'label' | 'labelPosition' | 'name' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'defaultValue' | 'necessityIndicator' | 'isRequired' | 'isDisabled' | 'onFocus' | 'onBlur' | 'onClick' | 'leadingIcon' | 'trailingIcon' | 'accessibilityLabel' | 'autoFocus' | 'testID' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType'>;
+type CommonProps = Pick<BaseInputProps, 'size' | 'label' | 'labelPosition' | 'name' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'defaultValue' | 'necessityIndicator' | 'isRequired' | 'isDisabled' | 'onFocus' | 'onBlur' | 'onClick' | 'leadingIcon' | 'trailingIcon' | 'accessibilityLabel' | 'autoFocus' | 'testID' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'placeholder'>;
 type PhoneNumberInputProps = StyledPropsBlade & CommonProps & {
     /**
      * Default value of the input, Used to set the default value of input field when it's uncontrolled
@@ -11927,4 +12642,4 @@ declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => Rea
  */
 declare const screenReaderStyles: CSSObject;
 
-export { AcceptPaymentsIcon, Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AddressBookIcon, AffordabilityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AttachmentIcon, AutoComplete, AutoCompleteProps, AutomateAccountingIcon, AutomatePayrollIcon, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AwardIcon, Badge, BadgeProps, BankAccountVerificationIcon, BankIcon, BarChartAltIcon, BarChartIcon, BarCodeIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BfsiIcon, BillIcon, BladeCommonEvents, BladeFile, BladeFileList, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BugIcon, BuildingIcon, BulkPayoutsIcon, BusinessBankingIcon, BusinessSpendManagementIcon, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CashIcon, CastIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, ClosedCaptioningIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodeSnippetIcon, CodepenIcon, CoinIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompanyRegistrationIcon, CompassIcon, ComponentIds, ConfettiIcon, ContactlessPaymentIcon, CookieIcon, CopyIcon, CopyrightIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CreditsAndLoansIcon, CropIcon, CrosshairIcon, CurrentAccountIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DigitalLendingIcon, DisbursePaymentsIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DotIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EcommerceIcon, EditComposeIcon, EditIcon, EditInlineIcon, EducationIcon, EscrowAccountIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileUploadProps, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, ForexManagementIcon, FreelanceIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphoneIcon, HeadphonesIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InstantSettlementIcon, InternationalPaymentsIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LoansForBusinessesIcon, LockIcon, LogInIcon, LogOutIcon, MagicCheckoutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MobileAppIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, OptimizerIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonIcon, PaymentButtonsIcon, PaymentGatewayIcon, PaymentLinkIcon, PaymentLinksIcon, PaymentPagesIcon, PayoutLinkIcon, PayrollAddonsIcon, PayrollForCaIcon, PayrollForStartupOrSmeIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneNumberInput, PhoneNumberInputProps, PhoneOffIcon, PhoneOutgoingIcon, PictureInPictureIcon, PieChartIcon, PinIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PosIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RazorpayxPayrollIcon, RefreshIcon, RepeatIcon, ReportsIcon, ResizerIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RouteIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaasIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchInput, SearchInputProps, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SolutionsIcon, SourceToPayIcon, SparklesIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StepGroup, StepGroupProps, StepItem, StepItemIcon, StepItemIndicator, StepItemProps, StopCircleIcon, StorefrontIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabPanel, TabPanelProps, Table, TableBackgroundColors, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationCommonProps, TablePaginationProps, TablePaginationType, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, TaxPaymentsIcon, TestIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, TokenHqIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TrademarkIcon, TrademarkRegisteredIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UpiAutopayIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VendorPaymentsIcon, VideoIcon, VideoOffIcon, ViewLiveDemoIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WalletIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getHeadingProps, getTextProps, screenReaderStyles, useTheme, useToast };
+export { AcceptPaymentsIcon, Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AddressBookIcon, AffordabilityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AttachmentIcon, AutoComplete, AutoCompleteProps, AutomateAccountingIcon, AutomatePayrollIcon, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AwardIcon, Badge, BadgeProps, BankAccountVerificationIcon, BankIcon, BarChartAltIcon, BarChartIcon, BarCodeIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BfsiIcon, BillIcon, BladeCommonEvents, BladeFile, BladeFileList, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BugIcon, BuildingIcon, BulkPayoutsIcon, BusinessBankingIcon, BusinessSpendManagementIcon, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CashIcon, CastIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, ClosedCaptioningIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodeSnippetIcon, CodepenIcon, CoinIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompanyRegistrationIcon, CompassIcon, ComponentIds, ConfettiIcon, ContactlessPaymentIcon, CookieIcon, CopyIcon, CopyrightIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CreditsAndLoansIcon, CropIcon, CrosshairIcon, CurrentAccountIcon, CustomersIcon, CutIcon, DashboardIcon, DatePicker, DatePickerProps, DeleteIcon, DigitalLendingIcon, DisbursePaymentsIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DotIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EcommerceIcon, EditComposeIcon, EditIcon, EditInlineIcon, EducationIcon, EscrowAccountIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileUploadProps, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, ForexManagementIcon, FreelanceIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphoneIcon, HeadphonesIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InstantSettlementIcon, InternationalPaymentsIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LoansForBusinessesIcon, LockIcon, LogInIcon, LogOutIcon, MagicCheckoutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MobileAppIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, OptimizerIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonIcon, PaymentButtonsIcon, PaymentGatewayIcon, PaymentLinkIcon, PaymentLinksIcon, PaymentPagesIcon, PayoutLinkIcon, PayrollAddonsIcon, PayrollForCaIcon, PayrollForStartupOrSmeIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneNumberInput, PhoneNumberInputProps, PhoneOffIcon, PhoneOutgoingIcon, PictureInPictureIcon, PieChartIcon, PinIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PosIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RazorpayxPayrollIcon, RefreshIcon, RepeatIcon, ReportsIcon, ResizerIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RouteIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaasIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchInput, SearchInputProps, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SolutionsIcon, SourceToPayIcon, SparklesIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StepGroup, StepGroupProps, StepItem, StepItemIcon, StepItemIndicator, StepItemProps, StopCircleIcon, StorefrontIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabPanel, TabPanelProps, Table, TableBackgroundColors, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationCommonProps, TablePaginationProps, TablePaginationType, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, TaxPaymentsIcon, TestIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, TokenHqIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TrademarkIcon, TrademarkRegisteredIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UpiAutopayIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VendorPaymentsIcon, VideoIcon, VideoOffIcon, ViewLiveDemoIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WalletIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getHeadingProps, getTextProps, screenReaderStyles, useTheme, useToast };