@razorpay/blade 11.20.0 → 11.21.1

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

@@ -3291,7 +3291,7 @@ type TextColors = `interactive.text.${InteractiveText}` | `surface.text.${Surfac
 type As = 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'abbr' | 'q' | 'cite' | 'figcaption' | 'div' | 'label';
 type BaseTextProps = {
     id?: string;
-    color?: TextColors;
+    color?: TextColors | 'currentColor';
     fontFamily?: keyof Theme['typography']['fonts']['family'];
     fontSize?: keyof Theme['typography']['fonts']['size'];
     fontWeight?: keyof Theme['typography']['fonts']['weight'];
@@ -6064,15 +6064,19 @@ type CollapsibleProps = {
     onExpandChange?: ({ isExpanded }: {
         isExpanded: boolean;
     }) => void;
+    /**
+     * **Internal**: disables trigger validations. Used for AccordionButton and SideNavLink internally
+     */
+    _dangerouslyDisableValidations?: boolean;
     /**
      * **Internal**: used to override responsive width restrictions
      */
     _shouldApplyWidthRestrictions?: boolean;
 } & TestID & StyledPropsBlade;
-declare const Collapsible: ({ children, direction, defaultIsExpanded, isExpanded, onExpandChange, testID, _shouldApplyWidthRestrictions, ...styledProps }: CollapsibleProps) => ReactElement;
+declare const Collapsible: ({ children, direction, defaultIsExpanded, isExpanded, onExpandChange, testID, _shouldApplyWidthRestrictions, _dangerouslyDisableValidations, ...styledProps }: CollapsibleProps) => ReactElement;
 
-type CollapsibleLinkProps = Pick<LinkProps, 'size' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'children'>;
-declare const CollapsibleLink: ({ children, size, isDisabled, testID, accessibilityLabel, }: CollapsibleLinkProps) => ReactElement;
+type CollapsibleLinkProps = Pick<LinkProps, 'color' | 'size' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'children'> & StyledPropsBlade;
+declare const CollapsibleLink: ({ children, size, color, isDisabled, testID, accessibilityLabel, ...styledProps }: CollapsibleLinkProps) => ReactElement;
 
 type CollapsibleButtonProps = Pick<ButtonProps, 'variant' | 'size' | 'iconPosition' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'icon' | 'children'>;
 declare const CollapsibleButton: React$1.ForwardRefExoticComponent<CollapsibleButtonProps & React$1.RefAttributes<BladeElementRef>>;
@@ -6080,8 +6084,15 @@ declare const CollapsibleButton: React$1.ForwardRefExoticComponent<CollapsibleBu
 type CollapsibleBodyProps = {
     children: ReactNode;
     width?: BaseBoxProps['width'];
+    /**
+     * Internal
+     *
+     * Set to false to remove margin of CollapsibleBody
+     */
+    _hasMargin?: boolean;
 } & TestID;
-declare const CollapsibleBody: ({ children, testID, width }: CollapsibleBodyProps) => ReactElement;
+
+declare const CollapsibleBody: ({ children, testID, width, _hasMargin, }: CollapsibleBodyProps) => ReactElement;
 
 type DividerProps = {
     /**
@@ -6156,6 +6167,13 @@ type DrawerProps = {
      * Ref to the element that should receive focus when opening the drawer.
      */
     initialFocusRef?: React.MutableRefObject<any>;
+    /**
+     * If `true`, the DrawerBody will be rendered only when it becomes active.
+     * Set to `false` to keep DrawerBody in DOM
+     *
+     * @default true
+     */
+    isLazy?: boolean;
 } & TestID;
 type DrawerHeaderProps = {
     /**
@@ -6223,7 +6241,7 @@ type DrawerHeaderProps = {
  *
  *
  */
-declare const Drawer: ({ isOpen, onDismiss, zIndex, children, accessibilityLabel, showOverlay, initialFocusRef, testID, }: DrawerProps) => React__default.ReactElement;
+declare const Drawer: ({ isOpen, onDismiss, zIndex, children, accessibilityLabel, showOverlay, initialFocusRef, isLazy, testID, }: DrawerProps) => React__default.ReactElement;
 
 /**
  * #### Usage
@@ -6240,6 +6258,7 @@ declare const Drawer: ({ isOpen, onDismiss, zIndex, children, accessibilityLabel
  *
  */
 declare const DrawerHeader: ({ title, subtitle, leading, trailing, titleSuffix, }: DrawerHeaderProps) => React__default.ReactElement;
+declare const drawerPadding = "spacing.6";
 declare const DrawerBody: ({ children }: {
     children: React__default.ReactNode;
 }) => React__default.ReactElement;
@@ -6779,7 +6798,7 @@ type CalendarProps<SelectionType extends DateSelectionType> = Pick<DatePickerPro
         type: Level;
     }) => void;
 };
-type DatePickerProps<Type extends DateSelectionType> = Omit<CalendarProps<Type>, MantineInternalProps> & Omit<DatePickerCommonInputProps, 'inputRef' | 'referenceProps' | 'labelPosition' | 'name'> & {
+type DatePickerProps<Type extends DateSelectionType> = Omit<CalendarProps<Type>, MantineInternalProps> & Omit<DatePickerCommonInputProps, 'inputRef' | 'referenceProps' | 'labelPosition' | 'name' | 'successText' | 'errorText' | 'helpText'> & {
     /**
      * Sets the label for the input element.
      */
@@ -6797,6 +6816,18 @@ type DatePickerProps<Type extends DateSelectionType> = Omit<CalendarProps<Type>,
         start: string;
         end?: string;
     };
+    helpText?: Type extends 'single' ? string : {
+        start: string;
+        end?: string;
+    };
+    errorText?: Type extends 'single' ? string : {
+        start: string;
+        end?: string;
+    };
+    successText?: Type extends 'single' ? string : {
+        start: string;
+        end?: string;
+    };
     labelPosition?: BaseInputProps['labelPosition'];
 };
 type DatePickerCommonInputProps = {
@@ -6809,7 +6840,7 @@ declare const DatePicker: <Type extends DateSelectionType = "single">({ selectio
     labelPosition?: "left" | "top" | undefined;
     inputRef: React__default.Ref<any>;
     referenceProps: any;
-} & Pick<TextInputProps, "size" | "autoFocus" | "isDisabled" | "accessibilityLabel" | "isRequired" | "necessityIndicator"> & FormInputValidationProps, "name" | "labelPosition" | "inputRef" | "referenceProps"> & {
+} & Pick<TextInputProps, "size" | "autoFocus" | "isDisabled" | "accessibilityLabel" | "isRequired" | "necessityIndicator"> & FormInputValidationProps, "name" | "labelPosition" | "helpText" | "errorText" | "successText" | "inputRef" | "referenceProps"> & {
     label?: (Type extends "single" ? string : {
         start: string;
         end?: string | undefined;
@@ -6818,6 +6849,18 @@ declare const DatePicker: <Type extends DateSelectionType = "single">({ selectio
         start: string;
         end?: string | undefined;
     }) | undefined;
+    helpText?: (Type extends "single" ? string : {
+        start: string;
+        end?: string | undefined;
+    }) | undefined;
+    errorText?: (Type extends "single" ? string : {
+        start: string;
+        end?: string | undefined;
+    }) | undefined;
+    successText?: (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 | {
@@ -9765,393 +9808,52 @@ type RadioGroupProps = {
 } & TestID & StyledPropsBlade;
 declare const RadioGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: RadioGroupProps) => React__default.ReactElement;
 
-type SkeletonProps = StyledPropsBlade & Pick<BaseBoxProps, 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'borderRadius'> & Partial<FlexboxProps> & {
-    testID?: string;
-};
-
-declare const Skeleton: ({ width, maxWidth, minWidth, height, maxHeight, minHeight, borderRadius, flexWrap, flexDirection, flexGrow, flexShrink, flexBasis, alignItems, alignContent, alignSelf, justifyItems, justifyContent, justifySelf, placeSelf, placeItems, order, testID, ...props }: SkeletonProps) => React.ReactElement;
-
-type SkipNavLinkProps = {
-    id?: string;
-    children?: StringChildrenType;
-};
-declare const SkipNavLink: ({ id, children, }: SkipNavLinkProps) => React__default.ReactElement;
-type SkipNavContentProps = {
-    id?: string;
-} & TestID;
-declare const SkipNavContent: ({ id, testID, }: SkipNavContentProps) => React__default.ReactElement;
-
-type BaseSpinnerProps = {
-    /**
-     * Sets the color of the spinner.
-     *
-     * @default 'default'
-     */
-    color?: 'primary' | 'white' | FeedbackColors;
-    /**
-     * Sets the label of the spinner.
-     *
-     * @default 'right'
-     */
-    label?: string;
-    /**
-     * Sets the label of the spinner.
-     *
-     */
-    labelPosition?: 'right' | 'bottom';
-    /**
-     * Sets the size of the spinner.
-     *
-     * @default 'medium'
-     */
-    size?: 'medium' | 'large' | 'xlarge';
-    /**
-     * Sets the aria-label for web & accessibilityLabel react-native.
-     *
-     */
-    accessibilityLabel: string;
-} & TestID & StyledPropsBlade;
-
-type SpinnerProps = BaseSpinnerProps & {
-    /**
-     * Sets the color of the spinner.
-     *
-     * @default 'default'
-     */
-    color?: 'primary' | 'neutral' | 'white';
-};
-declare const Spinner: ({ label, labelPosition, accessibilityLabel, color, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
-
-type SpotlightPopoverStepRenderProps = {
-    /**
-     * Go to a specific step
-     */
-    goToStep: (step: number) => void;
-    /**
-     * Go to the next step
-     */
-    goToNext: () => void;
-    /**
-     * Go to the previous step
-     */
-    goToPrevious: () => void;
-    /**
-     * Stop the tour
-     *
-     * This will call the `onFinish` callback
-     */
-    stopTour: () => void;
-    /**
-     * Current active step (zero based index)
-     */
-    activeStep: number;
-    /**
-     * Total number of steps
-     */
-    totalSteps: number;
-};
-type Step = {
-    /**
-     * Unique identifier for the tour step
-     */
-    name: string;
-    /**
-     * Content of the Popover
-     */
-    content: (props: SpotlightPopoverStepRenderProps) => React.ReactElement;
-    /**
-     * Footer content
-     */
-    footer?: (props: SpotlightPopoverStepRenderProps) => React.ReactNode;
+type TooltipProps = {
     /**
-     * Popover title
+     * Tooltip title
      */
     title?: string;
     /**
-     * Leading content placed before the title
-     *
-     * Can be any blade icon or asset.
-     */
-    titleLeading?: React.ReactNode;
-    /**
-     * Placement of Popover
-     * @default "top"
+     * Tooltip content
      */
-    placement?: UseFloatingOptions['placement'];
-};
-type SpotlightPopoverTourSteps = Step[];
-type SpotlightPopoverTourProps = {
+    content: string;
     /**
-     * Array of steps to be rendered
+     * Placement of tooltip
      *
-     * The order of the steps will be the order in which they are rendered depending on the `activeStep` prop
-     */
-    steps: SpotlightPopoverTourSteps;
-    /**
-     * Whether the tour is visible or not
-     */
-    isOpen: boolean;
-    /**
-     * Callback when the tour is opened or closed
+     * @default "top"
      */
+    placement?: Exclude<UseFloatingOptions['placement'], 'left-end' | 'left-start' | 'right-end' | 'right-start'>;
+    children: React.ReactElement;
     onOpenChange?: ({ isOpen }: {
         isOpen: boolean;
     }) => void;
     /**
-     * Callback which fires when the `stopTour` method is called from the `steps` array
-     */
-    onFinish?: () => void;
-    /**
-     * Callback when the active step changes
-     */
-    onStepChange?: (step: number) => void;
-    /**
-     * Active step to be rendered
+     * Sets the z-index of the modal
+     * @default 1100
      */
-    activeStep: number;
-    children: React.ReactNode;
-};
-type SpotlightPopoverTourStepProps = {
-    name: string;
-    children: React.ReactNode;
+    zIndex?: number;
 };
 
-declare const SpotlightPopoverTour: ({ steps, activeStep, isOpen, onFinish, onOpenChange, onStepChange, children, }: SpotlightPopoverTourProps) => React__default.ReactElement;
+declare const Tooltip: ({ title, content, children, placement, onOpenChange, zIndex, }: TooltipProps) => React__default.ReactElement;
 
-type SpotlightPopoverFooterAction = {
-    text?: string;
-} & Pick<ButtonProps, 'variant' | 'icon' | 'iconPosition' | 'isDisabled' | 'isLoading' | 'onClick'>;
-type SpotlightPopoverTourFooterProps = {
-    actions: {
-        primary?: SpotlightPopoverFooterAction;
-        secondary?: SpotlightPopoverFooterAction;
+declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, Omit<Partial<PaddingProps & MarginProps & {
+    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;
     };
-};
-declare const SpotlightPopoverTourFooter: ({ activeStep, totalSteps, actions, }: SpotlightPopoverTourFooterProps & Pick<SpotlightPopoverStepRenderProps, 'activeStep' | 'totalSteps'>) => React.ReactElement;
-
-declare const SpotlightPopoverTourStep: React__default.MemoExoticComponent<({ name, children, }: SpotlightPopoverTourStepProps) => React__default.ReactElement>;
-
-type StepGroupProps = {
-    /**
-     * size of step group
-     *
-     * @default medium
-     */
-    size?: 'medium' | 'large';
-    /**
-     * orientation of step group
-     *
-     * @default vertical
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * children slot for StepItem components
-     */
-    children: React__default.ReactElement | React__default.ReactElement[];
-    /**
-     * Width of StepGroup. By default it takes the width of its items.
-     */
-    width?: BoxProps['width'];
-    /**
-     * minWidth prop of StepGroup
-     */
-    minWidth?: BoxProps['minWidth'];
-    /**
-     * maxWidth prop of StepGroup
-     *
-     * @default 100%
-     */
-    maxWidth?: BoxProps['maxWidth'];
-    /**
-     * @private
-     *
-     * DO NOT USE THIS PROP OR YOU WILL BE FIRED (joking. you won't be fired. But something bad will happen for sure)
-     *
-     * This is an internal prop to keep track of nestingLevel of StepGroup
-     */
-    _nestingLevel?: number;
-} & StyledPropsBlade & TestID;
-type StepItemProps = {
-    _index?: number;
-    _nestingLevel?: StepGroupProps['_nestingLevel'];
-    _totalIndex?: number;
-    /**
-     * title of StepItem
-     */
-    title: string;
-    /**
-     * A string that renders in italic font. Made for adding timestamp values.
-     *
-     * ```jsx
-     * timestamp="Thu, 11th Oct23 | 12:00pm"
-     * ```
-     */
-    timestamp?: string;
-    /**
-     * Description of StepItem
-     */
-    description?: string;
-    /**
-     * Progress line of step. When its start only starting part is highlighted and rest is kept dotted
-     *
-     * @default full
-     */
-    stepProgress?: 'start' | 'end' | 'full' | 'none';
-    /**
-     * marker JSX slot. It can be StepItemIndicator or StepItemIcon
-     *
-     * ```jsx
-     * marker={<StepItemIndicator color="positive" />}
-     * marker={<StepItemIcon icon={CheckIcon} color="positive" />}
-     * ```
-     */
-    marker?: React__default.ReactElement;
-    /**
-     * trailing slot for StepItem. Mostly meant for Badge
-     */
-    trailing?: React__default.ReactElement;
-    /**
-     * Controlled state of selected item
-     */
-    isSelected?: boolean;
-    /**
-     * Anchor tag's href value. Turns StepItem into interactive item and render it as `<a>` tag
-     */
-    href?: LinkProps['href'];
-    /**
-     * Anchjor tag's taget value. Meant to be used alongside `href` prop
-     */
-    target?: LinkProps['target'];
-    /**
-     * StepItem's click handler. Turns StepItem into interactive item and render it as button tag
-     */
-    onClick?: (event: React__default.MouseEvent) => void;
-    /**
-     * Children slot for adding additional custom elements to item
-     */
-    children?: React__default.ReactNode;
-};
-
-/**
- * ## StepGroup
- *
- * Step Group visualises sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference.
- *
- * ### Usage
- *
- * ```jsx
- * <StepGroup orientation="vertical" size="medium">
- *   <StepItem title="Personal Details" />
- *   <StepItem title="Business Details" />
- * </StepGroup>
- * ```
- *
- * ---
- *
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
- */
-declare const StepGroup: ({ size, orientation, children, testID, _nestingLevel, width, minWidth, maxWidth, ...styledProps }: StepGroupProps) => React__default.ReactElement;
-
-/**
- * ## StepItem
- *
- * Component meant to be used inside the StepGroup parent component
- *
- * ### Usage
- *
- * ```jsx
- * <StepGroup orientation="vertical" size="medium">
- *   <StepItem
- *      title="Personal Details"
- *      timestamp="Thu 15th Oct'23 | 12:00pm"
- *      description="Fill your personal details here"
- *      marker={<StepItemIndicator color="negative" />}
- *    />
- * </StepGroup>
- * ```
- *
- * ---
- *
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
- */
-declare const StepItem: ({ title, timestamp, description, stepProgress, marker, trailing, isSelected, href, target, onClick, children, _index, _totalIndex, _nestingLevel, }: StepItemProps) => React__default.ReactElement;
-
-declare const StepItemIndicator: ({ color }: {
-    color: IndicatorProps['color'];
-}) => React.ReactElement;
-type StepItemIconProps = {
-    icon: IconComponent;
-    color: IndicatorProps['color'];
-};
-declare const StepItemIcon: ({ icon: Icon, color }: StepItemIconProps) => React.ReactElement;
-
-type OnChange = ({ isChecked, value, event, }: {
-    isChecked: boolean;
-    event?: React.ChangeEvent;
-    value?: string;
-}) => void;
-type SwitchProps = {
-    /**
-     * If `true`, The switch will be checked. This also makes the switch controlled
-     * Use `onChange` to update its value
-     *
-     * @default false
-     */
-    isChecked?: boolean;
-    /**
-     * If `true`, the switch will be initially checked. This also makes the switch uncontrolled
-     *
-     * @default false
-     */
-    defaultChecked?: boolean;
-    /**
-     * The callback invoked when the checked state of the `Switch` changes.
-     */
-    onChange?: OnChange;
-    /**
-     * The name of the input field in a switch
-     * (Useful for form submission).
-     */
-    name?: string;
-    /**
-     * The value to be used in the switch input.
-     * This is the value that will be returned on form submission.
-     */
-    value?: string;
-    /**
-     * If `true`, the switch will be disabled
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Size of the switch
-     *
-     * @default "medium"
-     */
-    size?: 'small' | 'medium';
-    /**
-     * Provides accessible label for internal checkbox component that sets the aria-label prop for screen readers.
-     */
-    accessibilityLabel: string;
-    /**
-     * The id of the input field in a switch, useful for associating a label element with the input via htmlFor prop
-     */
-    id?: string;
-} & TestID & StyledPropsBlade;
-
-declare const Switch: React__default.ForwardRefExoticComponent<{
-    isChecked?: boolean | undefined;
-    defaultChecked?: boolean | undefined;
-    onChange?: OnChange | undefined;
-    name?: string | undefined;
-    value?: string | undefined;
-    isDisabled?: boolean | undefined;
-    size?: "small" | "medium" | undefined;
-    accessibilityLabel: string;
-    id?: string | undefined;
-} & TestID & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
-    bottom: SpacingValueType | {
+    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;
@@ -10159,7 +9861,7 @@ declare const Switch: React__default.ForwardRefExoticComponent<{
         readonly l?: SpacingValueType | undefined;
         readonly xl?: SpacingValueType | undefined;
     };
-    left: SpacingValueType | {
+    maxHeight: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
         readonly s?: SpacingValueType | undefined;
@@ -10167,15 +9869,7 @@ declare const Switch: React__default.ForwardRefExoticComponent<{
         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 | {
+    maxWidth: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
         readonly s?: SpacingValueType | undefined;
@@ -10183,7 +9877,7 @@ declare const Switch: React__default.ForwardRefExoticComponent<{
         readonly l?: SpacingValueType | undefined;
         readonly xl?: SpacingValueType | undefined;
     };
-    top: SpacingValueType | {
+    minHeight: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
         readonly s?: SpacingValueType | undefined;
@@ -10191,13 +9885,53 @@ declare const Switch: React__default.ForwardRefExoticComponent<{
         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;
+    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;
@@ -10207,23 +9941,80 @@ declare const Switch: React__default.ForwardRefExoticComponent<{
         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;
+} & FlexboxProps & {
+    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;
+} & {
+    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;
@@ -10336,112 +10127,20 @@ declare const Switch: React__default.ForwardRefExoticComponent<{
         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<{
+} & {
+    onMouseOver: React$1.MouseEventHandler<HTMLElement>;
+    onMouseEnter: React$1.MouseEventHandler<HTMLElement>;
+    onMouseLeave: React$1.MouseEventHandler<HTMLElement>;
+    onScroll: React$1.UIEventHandler<HTMLElement>;
+} & {
+    draggable: boolean;
+    onDragStart: React$1.DragEventHandler<HTMLElement>;
+    onDragEnter: React$1.DragEventHandler<HTMLElement>;
+    onDragLeave: React$1.DragEventHandler<HTMLElement>;
+    onDragOver: React$1.DragEventHandler<HTMLElement>;
+    onDragEnd: React$1.DragEventHandler<HTMLElement>;
+    onDrop: React$1.DragEventHandler<HTMLElement>;
+} & {
     elevation?: ElevationLevels | {
         readonly base?: ElevationLevels | undefined;
         readonly xs?: ElevationLevels | undefined;
@@ -10706,508 +10405,724 @@ declare const Switch: React__default.ForwardRefExoticComponent<{
         readonly l?: "platform-web" | undefined;
         readonly xl?: "platform-web" | undefined;
     } | undefined;
-}, "visibility">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
-
-type TableNode<Item> = Item & {
-    id: Identifier;
-};
-type TableData<Item> = {
-    nodes: TableNode<Item>[];
-};
-type TableBackgroundColors = `surface.background.gray.${DotNotationToken<Theme['colors']['surface']['background']['gray']>}`;
-type TableHeaderProps = {
-    /**
-     * The children of TableHeader should be TableHeaderRow
-     * @example
-     * <TableHeader>
-     *   <TableHeaderRow>
-     *     <TableHeaderCell>Header Cell 1</TableHeaderCell>
-     *   </TableHeaderRow>
-     * </TableHeader>
-     **/
-    children: React.ReactNode;
-};
-type TableHeaderRowProps = {
-    /**
-     * The children of TableHeaderRow should be TableHeaderCell
-     * @example
-     * <TableHeader>
-     *   <TableHeaderRow>
-     *     <TableHeaderCell>Header Cell 1</TableHeaderCell>
-     *   </TableHeaderRow>
-     * </TableHeader>
-     **/
-    children: React.ReactNode;
-    /**
-     * The rowDensity prop determines the density of the table.
-     * The rowDensity prop can be 'compact', 'normal', or'comfortable'.
-     * The default value is `normal`.
-     **/
-    rowDensity?: TableProps<unknown>['rowDensity'];
-};
-type TableHeaderCellProps = {
-    /**
-     * The children of TableHeaderCell can be a string or a ReactNode.
-     **/
-    children: string | React.ReactNode;
-    /**
-     * The unique key of the column.
-     * This is used to identify the column for sorting in sortFunctions prop of Table.
-     * Sorting is enabled only for columns whose key is present in sortableColumns prop of Table.
-     **/
-    headerKey?: string;
-};
-type TableProps<Item> = {
-    /**
-     * The children of the Table component should be a function that returns TableHeader, TableBody and TableFooter components.
-     * The function will be called with the tableData prop.
-     */
-    children: (tableData: TableNode<Item>[]) => React.ReactElement;
-    /**
-     * The data prop is an object with a nodes property that is an array of objects.
-     * Each object in the array is a row in the table.
-     * The object should have an id property that is a unique identifier for the row.
-     */
-    data: TableData<Item>;
+} & MakeObjectResponsive<{
+    backgroundColor: "transparent" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense";
+}, "backgroundColor"> & {
+    as: "aside" | "div" | "footer" | "header" | "label" | "main" | "nav" | "section" | "span";
+} & {
+    children?: React$1.ReactNode | React$1.ReactNode[];
+    tabIndex?: number | undefined;
+    id?: string | undefined;
+} & TestID>, "backgroundColor" | "as"> & Partial<{
+    border?: csstype.Property.Border<string | number> | {
+        readonly base?: csstype.Property.Border<string | number> | undefined;
+        readonly xs?: csstype.Property.Border<string | number> | undefined;
+        readonly s?: csstype.Property.Border<string | number> | undefined;
+        readonly m?: csstype.Property.Border<string | number> | undefined;
+        readonly l?: csstype.Property.Border<string | number> | undefined;
+        readonly xl?: csstype.Property.Border<string | number> | undefined;
+    } | undefined;
+    backgroundColor: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | {
+        readonly base?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
+        readonly xs?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
+        readonly s?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
+        readonly m?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
+        readonly l?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
+        readonly xl?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
+    };
+    cursor?: csstype.Property.Cursor | {
+        readonly base?: csstype.Property.Cursor | undefined;
+        readonly xs?: csstype.Property.Cursor | undefined;
+        readonly s?: csstype.Property.Cursor | undefined;
+        readonly m?: csstype.Property.Cursor | undefined;
+        readonly l?: csstype.Property.Cursor | undefined;
+        readonly xl?: csstype.Property.Cursor | undefined;
+    } | undefined;
+    lineHeight: 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;
+    };
+    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;
+    touchAction: csstype.Property.TouchAction | {
+        readonly base?: csstype.Property.TouchAction | undefined;
+        readonly xs?: csstype.Property.TouchAction | undefined;
+        readonly s?: csstype.Property.TouchAction | undefined;
+        readonly m?: csstype.Property.TouchAction | undefined;
+        readonly l?: csstype.Property.TouchAction | undefined;
+        readonly xl?: csstype.Property.TouchAction | undefined;
+    } | undefined;
+    userSelect: csstype.Property.UserSelect | {
+        readonly base?: csstype.Property.UserSelect | undefined;
+        readonly xs?: csstype.Property.UserSelect | undefined;
+        readonly s?: csstype.Property.UserSelect | undefined;
+        readonly m?: csstype.Property.UserSelect | undefined;
+        readonly l?: csstype.Property.UserSelect | undefined;
+        readonly xl?: csstype.Property.UserSelect | undefined;
+    } | undefined;
+    borderBottom?: csstype.Property.BorderBottom<string | number> | {
+        readonly base?: csstype.Property.BorderBottom<string | number> | undefined;
+        readonly xs?: csstype.Property.BorderBottom<string | number> | undefined;
+        readonly s?: csstype.Property.BorderBottom<string | number> | undefined;
+        readonly m?: csstype.Property.BorderBottom<string | number> | undefined;
+        readonly l?: csstype.Property.BorderBottom<string | number> | undefined;
+        readonly xl?: csstype.Property.BorderBottom<string | number> | undefined;
+    } | undefined;
+    borderLeft?: csstype.Property.BorderLeft<string | number> | {
+        readonly base?: csstype.Property.BorderLeft<string | number> | undefined;
+        readonly xs?: csstype.Property.BorderLeft<string | number> | undefined;
+        readonly s?: csstype.Property.BorderLeft<string | number> | undefined;
+        readonly m?: csstype.Property.BorderLeft<string | number> | undefined;
+        readonly l?: csstype.Property.BorderLeft<string | number> | undefined;
+        readonly xl?: csstype.Property.BorderLeft<string | number> | undefined;
+    } | undefined;
+    borderRight?: csstype.Property.BorderRight<string | number> | {
+        readonly base?: csstype.Property.BorderRight<string | number> | undefined;
+        readonly xs?: csstype.Property.BorderRight<string | number> | undefined;
+        readonly s?: csstype.Property.BorderRight<string | number> | undefined;
+        readonly m?: csstype.Property.BorderRight<string | number> | undefined;
+        readonly l?: csstype.Property.BorderRight<string | number> | undefined;
+        readonly xl?: csstype.Property.BorderRight<string | number> | undefined;
+    } | undefined;
+    borderTop?: csstype.Property.BorderTop<string | number> | {
+        readonly base?: csstype.Property.BorderTop<string | number> | undefined;
+        readonly xs?: csstype.Property.BorderTop<string | number> | undefined;
+        readonly s?: csstype.Property.BorderTop<string | number> | undefined;
+        readonly m?: csstype.Property.BorderTop<string | number> | undefined;
+        readonly l?: csstype.Property.BorderTop<string | number> | undefined;
+        readonly xl?: csstype.Property.BorderTop<string | number> | 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;
+} & {
+    className?: string | undefined;
+    id?: string | undefined;
+    tabIndex?: number | undefined;
+}> & BladeCommonEvents & {
+    'data-blade-component'?: string | undefined;
+    'data-testid'?: string | undefined;
+    tabIndex: -1;
+}, "tabIndex" | "data-testid" | "data-blade-component">;
+
+type SideNavProps = {
     /**
-     * The selectionType prop determines the type of selection that is allowed on the table.
-     * The selectionType prop can be 'none', 'single' or 'multiple'.
-     * @default 'none'
-     **/
-    selectionType?: 'none' | 'single' | 'multiple';
+     * Children slot.
+     *
+     * Supports SideNavFooter, SideNavBody
+     */
+    children: React__default.ReactNode;
     /**
-     * The onSelectionChange prop is a function that is called when the selection changes.
-     * The function is called with an object that has a values property that is an array of the selected rows.
-     **/
-    onSelectionChange?: ({ values }: {
-        values: TableNode<Item>[];
-    }) => void;
+     * **Only applicable in mobile**
+     *
+     * State for opening / closing the SideNav in mobile
+     */
+    isOpen?: DrawerProps['isOpen'];
     /**
-     * The isHeaderSticky prop determines whether the table header is sticky or not.
-     * The default value is `false`.
-     **/
-    isHeaderSticky?: boolean;
+     * **Only applicable in mobile**
+     *
+     * Callback when SideNav is closed
+     */
+    onDismiss?: DrawerProps['onDismiss'];
     /**
-     * The isFooterSticky prop determines whether the table footer is sticky or not.
-     * The default value is `false`.
-     **/
-    isFooterSticky?: boolean;
+     * Banner slot for usecases like adding Activation Panel
+     *
+     * **IMPORTANT** Avoid adding promotional items in this
+     */
+    banner?: React__default.ReactElement;
+} & StyledPropsBlade & TestID;
+type SideNavLinkProps = {
     /**
-     * The isFirstColumnSticky prop determines whether the first column is sticky or not.
-     * The default value is `false`.
-     **/
-    isFirstColumnSticky?: boolean;
+     * title of the Link
+     */
+    title: string;
     /**
-     * The rowDensity prop determines the density of the table.
-     * The rowDensity prop can be 'compact', 'normal', or'comfortable'.
-     * The default value is `normal`.
-     **/
-    rowDensity?: 'compact' | 'normal' | 'comfortable';
+     * Slot after the title.
+     *
+     * Used for <Badge />, <Counter /> in most cases
+     */
+    titleSuffix?: React__default.ReactElement;
     /**
-     * The onSortChange prop is a function that is called when the sort changes.
-     * The function is called with an object that has a sortKey property that is the key of the column that is sorted and a isSortReversed property that is a boolean that determines whether the sort is reversed or not.
-     **/
-    onSortChange?: ({ sortKey, isSortReversed, }: {
-        sortKey: TableHeaderCellProps['headerKey'];
-        isSortReversed: boolean;
-    }) => void;
+     * Trailing slot for item. Only visible on hover of the item
+     *
+     * Used for <Button />
+     */
+    trailing?: React__default.ReactElement;
     /**
-     * The sortFunctions prop is an object that has a key for each column that is sortable.
-     * The value of each key is a function that is called when the column is sorted.
-     * The function is called with an array of the rows in the table.
-     * The function should return an array of the rows in the table.
-     **/
-    sortFunctions?: Record<string, (array: TableNode<Item>[]) => TableNode<Item>[]>;
+     * href of the link
+     */
+    href?: LinkProps['href'];
     /**
-     * The toolbar prop is a React element that is rendered above the table.
-     * The toolbar prop should be a `TableToolbar` component.
-     **/
-    toolbar?: React.ReactElement;
+     * Anchor tag `target` attribute
+     */
+    target?: LinkProps['target'];
     /**
-     * The pagination prop is a React element that is rendered below the table.
-     * The pagination prop should be a `TablePagination` component.
-     **/
-    pagination?: React.ReactElement;
+     * as prop to pass ReactRouter's Link component.
+     *
+     * ```jsx
+     * import { Link } from 'react-router-dom';
+     *
+     * <SideNavLink as={Link} />
+     * ```
+     */
+    as: React__default.ComponentType<any>;
     /**
-     * The height prop is a responsive styled prop that determines the height of the table.
-     **/
-    height?: BoxProps['height'];
+     * Set Active state of SideNavLink.
+     *
+     * Checkout SideNav documentation for usage
+     */
+    isActive?: boolean;
     /**
-     * The showStripedRows prop determines whether the table should have striped rows or not.
-     * The default value is `false`.
-     **/
-    showStripedRows?: boolean;
+     * Leading icon for SideNavLink
+     */
+    icon?: IconComponent;
     /**
-     * The gridTemplateColumns prop determines the grid-template-columns CSS property of the table.
-     * The default value is `repeat(${columnCount},minmax(100px, 1fr))`.
-     **/
-    gridTemplateColumns?: string;
+     * Children slot to add Nested Menu
+     *
+     * ```jsx
+     * <SideNavLink title="L2 Trigger" href="/l2-first-item">
+     *  <SideNavLevel>
+     *    <SideNavLink title="L2 Item" href="/l2-first-item" />
+     *    <SideNavLink title="L2 Item 2" href="/l2-second-item" />
+     *  </SideNavLevel>
+     * </SideNavLink>
+     * ```
+     */
+    children?: React__default.ReactElement;
     /**
-     * The isLoading prop determines whether the table is loading or not.
-     * The default value is `false`.
-     **/
-    isLoading?: boolean;
+     * Tooltip object to add tooltip to SideNavLink
+     *
+     * ```jsx
+     * <SideNavLink
+     *  tooltip={{
+     *    title: 'Tooltip Title',
+     *    content: 'Tooltip description'
+     *  }}
+     * />
+     * ```
+     */
+    tooltip?: Pick<TooltipProps, 'title' | 'content' | 'onOpenChange'>;
+};
+type SideNavSectionProps = {
+    title?: string;
     /**
-     * The isRefreshing prop determines whether the table is refreshing or not.
-     * The default value is `false`.
-     **/
-    isRefreshing?: boolean;
-} & StyledPropsBlade;
-type Identifier = string | number;
-type TableBodyProps = {
+     * Number of items after which the items are collapsed into `+x more`
+     */
+    maxVisibleItems?: number;
     /**
-     * The children of the TableBody component should be TableRow components.
-     * @example
-     * <TableBody>
-     *   <TableRow>
-     *     <TableCell>...</TableCell>
-     *   </TableRow>
-     * </TableBody>
-     **/
-    children: React.ReactNode;
+     * Default value if the nav section is expanded or collapsed after maxVisibleItems
+     *
+     * @default false
+     */
+    defaultIsExpanded?: boolean;
+    /**
+     * Callback when `+x more is clicked`
+     */
+    onExpandChange?: ({ isExpanded }: {
+        isExpanded: boolean;
+    }) => void;
+    /**
+     * Children slot for SideNavLink
+     */
+    children: React__default.ReactElement[];
 };
-type TableRowProps<Item> = {
+type SideNavFooterProps = {
+    /**
+     * Children slot for SideNavLink, SideNavItem
+     */
+    children: React__default.ReactElement[] | React__default.ReactElement;
+};
+type SideNavItemProps = {
+    /**
+     * Leading slot for SideNavItem.
+     *
+     * Meant for Indicator, Icon, etc
+     */
+    leading: React__default.ReactElement;
+    /**
+     * Trailing slot for SideNavItem.
+     *
+     * Meant for Button, Switch, etc
+     */
+    trailing: React__default.ReactElement;
+    /**
+     * Title of SideNavItem
+     */
+    title: string;
+    /**
+     * Render item of container. Use as="label" when using Switch or form input in trailing
+     *
+     * @default div
+     */
+    as?: 'label' | 'div';
+    /**
+     * backgroundColor of the item
+     *
+     * @default undefined
+     */
+    backgroundColor?: BaseBoxProps['backgroundColor'];
+    /**
+     * Tooltip object to add tooltip to SideNavItem
+     *
+     * ```jsx
+     * <SideNavItem
+     *  tooltip={{
+     *    title: 'Tooltip Title',
+     *    content: 'Tooltip description'
+     *  }}
+     * />
+     * ```
+     */
+    tooltip?: SideNavLinkProps['tooltip'];
+};
+type SideNavBodyProps = {
+    children: React__default.ReactElement | React__default.ReactElement[];
+};
+type SideNavLevelProps = {
+    children: React__default.ReactElement | React__default.ReactElement[];
+};
+
+/**
+ * ### SideNav component
+ *
+ * The side navigation is positioned along the left side of the screen that provides quick access to different sections or functionalities of the application.
+ *
+ * ---
+ *
+ * #### Usage
+ *
+ * SideNav requires handling active state with React Router, Checkout Usage with React Router v6 at - [SideNav Documentation](https://blade.razorpay.com/?path=/docs/components-sidenav--docs)
+ *
+ */
+declare const SideNav: ({ children, isOpen, onDismiss, banner, testID, ...styledProps }: SideNavProps) => React__default.ReactElement;
+
+declare const SideNavLink: ({ title, href, children, titleSuffix, trailing, isActive, icon, tooltip, as, target, }: SideNavLinkProps) => React__default.ReactElement;
+
+declare const SideNavLevel: ({ children }: SideNavLevelProps) => React__default.ReactElement;
+
+declare const SideNavSection: ({ children, title, defaultIsExpanded, maxVisibleItems, onExpandChange, }: SideNavSectionProps) => React__default.ReactElement;
+
+declare const SideNavItem: ({ leading, trailing, title, backgroundColor, tooltip, as, }: SideNavItemProps) => React.ReactElement;
+
+declare const SideNavFooter: ({ children }: SideNavFooterProps) => React__default.ReactElement;
+
+declare const SideNavBody: ({ children }: SideNavBodyProps) => React.ReactElement;
+
+type SkeletonProps = StyledPropsBlade & Pick<BaseBoxProps, 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'borderRadius'> & Partial<FlexboxProps> & {
+    testID?: string;
+};
+
+declare const Skeleton: ({ width, maxWidth, minWidth, height, maxHeight, minHeight, borderRadius, flexWrap, flexDirection, flexGrow, flexShrink, flexBasis, alignItems, alignContent, alignSelf, justifyItems, justifyContent, justifySelf, placeSelf, placeItems, order, testID, ...props }: SkeletonProps) => React.ReactElement;
+
+type SkipNavLinkProps = {
+    id?: string;
+    children?: StringChildrenType;
     /**
-     * The children of the TableRow component should be TableCell components.
-     * @example
-     * <TableRow>
-     *   <TableCell>...</TableCell>
-     * </TableRow>
-     **/
-    children: React.ReactNode;
+     * **Internal**
+     *
+     * Adds background to link. Used internally in SideNav
+     */
+    _hasBackground?: boolean;
+};
+declare const SkipNavLink: ({ id, children, _hasBackground, }: SkipNavLinkProps) => React__default.ReactElement;
+type SkipNavContentProps = {
+    id?: string;
+} & TestID;
+declare const SkipNavContent: ({ id, testID, }: SkipNavContentProps) => React__default.ReactElement;
+
+type BaseSpinnerProps = {
     /**
-     * The item prop is used to pass the individual table item to the TableRow component.
-     * @example
-     * tableData.map((tableItem) => (
-     *   <TableRow item={item}>
-     *     <TableCell>...</TableCell>
-     *   </TableRow>
-     * ));
-     **/
-    item: TableNode<Item>;
+     * Sets the color of the spinner.
+     *
+     * @default 'default'
+     */
+    color?: 'primary' | 'white' | FeedbackColors;
     /**
-     * The isDisabled prop is used to disable the TableRow component.
-     * @example
-     * <TableRow isDisabled>
-     *   <TableCell>...</TableCell>
-     * </TableRow>
-     **/
-    isDisabled?: boolean;
+     * Sets the label of the spinner.
+     *
+     * @default 'right'
+     */
+    label?: string;
     /**
-     * Callback triggered when the row is hovered. It is called with the current row item prop.
+     * Sets the label of the spinner.
+     *
      */
-    onHover?: ({ item }: {
-        item: TableNode<Item>;
-    }) => void;
+    labelPosition?: 'right' | 'bottom';
     /**
-     * Callback triggered when the row is clicked. It is called with the current row item prop.
+     * Sets the size of the spinner.
+     *
+     * @default 'medium'
      */
-    onClick?: ({ item }: {
-        item: TableNode<Item>;
-    }) => void;
-};
-type TableCellProps = {
+    size?: 'medium' | 'large' | 'xlarge';
     /**
-     * The children of the TableCell component should be a string or a ReactNode.
-     * @example
-     * <TableCell>{'Hello'}</TableCell>
-     * <TableCell>
-     *  <Text>...</Text>
-     * </TableCell>
-     * <TableCell>
-     * <Button>...</Button>
-     * </TableCell>
-     **/
-    children: React.ReactNode;
-};
-type TableFooterProps = {
+     * Sets the aria-label for web & accessibilityLabel react-native.
+     *
+     */
+    accessibilityLabel: string;
+} & TestID & StyledPropsBlade;
+
+type SpinnerProps = BaseSpinnerProps & {
     /**
-     * The children of TableFooter should be TableFooterRow
-     * @example
-     * <TableFooter>
-     *   <TableFooterRow>
-     *     <TableFooterCell>Footer Cell 1</TableFooterCell>
-     *   </TableFooterRow>
-     * </TableFooter>
-     **/
-    children: React.ReactNode;
+     * Sets the color of the spinner.
+     *
+     * @default 'default'
+     */
+    color?: 'primary' | 'neutral' | 'white';
 };
-type TableFooterRowProps = {
+declare const Spinner: ({ label, labelPosition, accessibilityLabel, color, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
+
+type SpotlightPopoverStepRenderProps = {
     /**
-     * The children of TableFooterRow should be TableFooterCell
-     * @example
-     * <TableFooter>
-     *   <TableFooterRow>
-     *     <TableFooterCell>Footer Cell 1</TableFooterCell>
-     *   </TableFooterRow>
-     * </TableFooter>
-     **/
-    children: React.ReactNode;
-};
-type TableFooterCellProps = {
+     * Go to a specific step
+     */
+    goToStep: (step: number) => void;
     /**
-     * The children of TableHeaderCell can be a string or a ReactNode.
-     **/
-    children: string | React.ReactNode;
-};
-type TablePaginationCommonProps = {
+     * Go to the next step
+     */
+    goToNext: () => void;
     /**
-     * The default page size.
-     * Page size controls how rows are shown per page.
-     * @default 10
-     **/
-    defaultPageSize?: 10 | 25 | 50;
+     * Go to the previous step
+     */
+    goToPrevious: () => void;
     /**
-     * The current page. Passing this prop will make the component controlled and will not update the page on its own.
-     **/
-    currentPage?: number;
+     * Stop the tour
+     *
+     * This will call the `onFinish` callback
+     */
+    stopTour: () => void;
     /**
-     * Callback function that is called when the page size is changed
+     * Current active step (zero based index)
      */
-    onPageSizeChange?: ({ pageSize }: {
-        pageSize: number;
-    }) => void;
+    activeStep: number;
     /**
-     * Whether to show the page size picker. It will be always be hidden on mobile.
-     * Page size picker controls how rows are shown per page.
-     * @default true
+     * Total number of steps
      */
-    showPageSizePicker?: boolean;
+    totalSteps: number;
+};
+type Step = {
     /**
-     * Whether to show the page number selector. It will be always be hidden on mobile.
-     * Page number selectors is a group of buttons that allows the user to jump to a specific page.
-     * @default false
+     * Unique identifier for the tour step
      */
-    showPageNumberSelector?: boolean;
+    name: string;
     /**
-     * Content of the label to be shown in the pagination component
-     * @default `Showing 1 to ${totalItems} Items`
+     * Content of the Popover
      */
-    label?: string;
+    content: (props: SpotlightPopoverStepRenderProps) => React.ReactElement;
     /**
-     * Whether to show the label. It will be always be hidden on mobile.
-     * @default false
+     * Footer content
      */
-    showLabel?: boolean;
-};
-type TablePaginationType = 'client' | 'server';
-type TablePaginationServerProps = TablePaginationCommonProps & {
+    footer?: (props: SpotlightPopoverStepRenderProps) => React.ReactNode;
     /**
-     * Whether the pagination is happening on client or server.
-     * If the pagination is happening on `client`, the Table component will **divide the data into pages** and show the pages based on the page size.
-     * If the pagination is happening on `server`, the Table component will **not divide the data into pages and will show all the data**. You will have to fetch data for each page as the page changes and pass it to the Table component.
-     * When paginationType is `server`, the `onPageChange` & `totalItemCount` props are required.
-     * @default 'client'
-     * */
-    paginationType?: Extract<TablePaginationType, 'server'>;
+     * Popover title
+     */
+    title?: string;
     /**
-     * The total number of possible items in the table. This is used to calculate the total number of pages when pagination is happening on server and not all the data is fetched at once.
+     * Leading content placed before the title
+     *
+     * Can be any blade icon or asset.
      */
-    totalItemCount: number;
+    titleLeading?: React.ReactNode;
     /**
-     * Callback function that is called when the page is changed
+     * Placement of Popover
+     * @default "top"
      */
-    onPageChange: ({ page }: {
-        page: number;
-    }) => void;
+    placement?: UseFloatingOptions['placement'];
 };
-type TablePaginationClientProps = TablePaginationCommonProps & {
+type SpotlightPopoverTourSteps = Step[];
+type SpotlightPopoverTourProps = {
     /**
-     * Whether the pagination is happening on client or server.
-     * If the pagination is happening on `client`, the Table component will **divide the data into pages** and show the pages based on the page size.
-     * If the pagination is happening on `server`, the Table component will **not divide the data into pages and will show all the data**. You will have to fetch data for each page as the page changes and pass it to the Table component.
-     * When paginationType is `server`, the `onPageChange` & `totalItemCount` props are required.
-     * @default 'client'
-     * */
-    paginationType?: Extract<TablePaginationType, 'client'>;
+     * Array of steps to be rendered
+     *
+     * The order of the steps will be the order in which they are rendered depending on the `activeStep` prop
+     */
+    steps: SpotlightPopoverTourSteps;
     /**
-     * The total number of possible items in the table. This is used to calculate the total number of pages when pagination is happening on server and not all the data is fetched at once.
+     * Whether the tour is visible or not
      */
-    totalItemCount?: number;
+    isOpen: boolean;
     /**
-     * Callback function that is called when the page is changed
+     * Callback when the tour is opened or closed
      */
-    onPageChange?: ({ page }: {
-        page: number;
+    onOpenChange?: ({ isOpen }: {
+        isOpen: boolean;
     }) => void;
-};
-type TablePaginationProps = TablePaginationCommonProps & (TablePaginationServerProps | TablePaginationClientProps);
-type TableToolbarProps = {
     /**
-     * The children of TableToolbar should be TableToolbarActions
+     * Callback which fires when the `stopTour` method is called from the `steps` array
      */
-    children?: React.ReactNode;
+    onFinish?: () => void;
     /**
-     * The title of the TableToolbar. If not provided, it will show the default title.
-     * @default `Showing 1 to ${totalItems} Items`
+     * Callback when the active step changes
      */
-    title?: string;
+    onStepChange?: (step: number) => void;
     /**
-     * The title to show when items are selected. If not provided, it will show the default title.
-     * @default `${selectedRows.length} 'Items'} Selected`
+     * Active step to be rendered
      */
-    selectedTitle?: string;
+    activeStep: number;
+    children: React.ReactNode;
+};
+type SpotlightPopoverTourStepProps = {
+    name: string;
+    children: React.ReactNode;
 };
-type TableToolbarActionsProps = {
-    children?: React.ReactNode;
-} & StyledPropsBlade;
-
-declare const Table: <Item>({ children, data, selectionType, onSelectionChange, isHeaderSticky, isFooterSticky, isFirstColumnSticky, rowDensity, onSortChange, sortFunctions, toolbar, pagination, height, showStripedRows, gridTemplateColumns, isLoading, isRefreshing, ...styledProps }: TableProps<Item>) => React__default.ReactElement;
-
-declare const TableHeader: ({ children }: TableHeaderRowProps) => React__default.ReactElement;
-declare const TableHeaderCell: ({ children, headerKey }: TableHeaderCellProps) => React__default.ReactElement;
-declare const TableHeaderRow: ({ children, rowDensity }: TableHeaderRowProps) => React__default.ReactElement;
-
-declare const TableBody: ({ children }: TableBodyProps) => React__default.ReactElement;
-declare const TableCell: ({ children }: TableCellProps) => React__default.ReactElement;
-declare const TableRow: <Item>({ children, item, isDisabled, onHover, onClick, }: TableRowProps<Item>) => React__default.ReactElement;
-
-declare const TableFooter: ({ children }: TableFooterProps) => React__default.ReactElement;
-declare const TableFooterRow: ({ children }: TableFooterRowProps) => React__default.ReactElement;
-declare const TableFooterCell: ({ children }: TableFooterCellProps) => React__default.ReactElement;
 
-declare const TablePagination: ({ currentPage: controlledCurrentPage, onPageChange, onPageSizeChange, defaultPageSize, showPageSizePicker, showPageNumberSelector, showLabel, label, totalItemCount, paginationType, }: TablePaginationProps) => React__default.ReactElement;
+declare const SpotlightPopoverTour: ({ steps, activeStep, isOpen, onFinish, onOpenChange, onStepChange, children, }: SpotlightPopoverTourProps) => React__default.ReactElement;
 
-declare const TableToolbarActions: ({ children, ...styledProps }: TableToolbarActionsProps) => React__default.ReactElement;
-declare const TableToolbar: ({ children, title, selectedTitle: controlledSelectedTitle, }: TableToolbarProps) => React__default.ReactElement;
+type SpotlightPopoverFooterAction = {
+    text?: string;
+} & Pick<ButtonProps, 'variant' | 'icon' | 'iconPosition' | 'isDisabled' | 'isLoading' | 'onClick'>;
+type SpotlightPopoverTourFooterProps = {
+    actions: {
+        primary?: SpotlightPopoverFooterAction;
+        secondary?: SpotlightPopoverFooterAction;
+    };
+};
+declare const SpotlightPopoverTourFooter: ({ activeStep, totalSteps, actions, }: SpotlightPopoverTourFooterProps & Pick<SpotlightPopoverStepRenderProps, 'activeStep' | 'totalSteps'>) => React.ReactElement;
 
-type TabsProps = {
+declare const SpotlightPopoverTourStep: React__default.MemoExoticComponent<({ name, children, }: SpotlightPopoverTourStepProps) => React__default.ReactElement>;
+
+type StepGroupProps = {
     /**
-     * The content of the component, accepts `TabsList` and `TabsPanel` components.
+     * size of step group
+     *
+     * @default medium
      */
-    children: React__default.ReactNode;
+    size?: 'medium' | 'large';
     /**
-     * The value of the tab panel same as the corresponding TabItem's value to match the selected TabItem.
+     * orientation of step group
+     *
+     * @default vertical
      */
-    value?: string;
+    orientation?: 'horizontal' | 'vertical';
     /**
-     * The default value of the selected tab, in case the Tabs component is uncontrolled.
+     * children slot for StepItem components
      */
-    defaultValue?: string;
+    children: React__default.ReactElement | React__default.ReactElement[];
     /**
-     * Callback fired when the value changes.
+     * Width of StepGroup. By default it takes the width of its items.
      */
-    onChange?: (value: string) => void;
+    width?: BoxProps['width'];
     /**
-     * The orientation of the tabs.
-     *
-     * @default 'horizontal' (always horizontal on react-native)
+     * minWidth prop of StepGroup
      */
-    orientation?: Platform.Select<{
-        web: 'horizontal' | 'vertical';
-        native: 'horizontal';
-    }>;
+    minWidth?: BoxProps['minWidth'];
     /**
-     * The size of the tabs.
+     * maxWidth prop of StepGroup
      *
-     * @default 'medium'
+     * @default 100%
      */
-    size?: 'medium' | 'large';
+    maxWidth?: BoxProps['maxWidth'];
     /**
-     * The variant of the tabs.
+     * @private
      *
-     * @default 'bordered'
+     * DO NOT USE THIS PROP OR YOU WILL BE FIRED (joking. you won't be fired. But something bad will happen for sure)
+     *
+     * This is an internal prop to keep track of nestingLevel of StepGroup
      */
-    variant?: 'bordered' | 'borderless' | 'filled';
+    _nestingLevel?: number;
+} & StyledPropsBlade & TestID;
+type StepItemProps = {
+    _index?: number;
+    _nestingLevel?: StepGroupProps['_nestingLevel'];
+    _totalIndex?: number;
     /**
-     * If `true`, the TabItems will grow to use all the available space.
-     *
-     * @default false
+     * title of StepItem
      */
-    isFullWidthTabItem?: boolean;
+    title: string;
     /**
-     * If `true`, the TabPanel will be rendered only when it becomes active.
+     * A string that renders in italic font. Made for adding timestamp values.
      *
-     * @default false
+     * ```jsx
+     * timestamp="Thu, 11th Oct23 | 12:00pm"
+     * ```
      */
-    isLazy?: boolean;
-};
-type TabItemProps = {
+    timestamp?: string;
     /**
-     * The label of the tab item.
+     * Description of StepItem
      */
-    children: React__default.ReactNode;
+    description?: string;
     /**
-     * The value of the tab item.
+     * Progress line of step. When its start only starting part is highlighted and rest is kept dotted
+     *
+     * @default full
      */
-    value: string;
+    stepProgress?: 'start' | 'end' | 'full' | 'none';
     /**
-     * Leading element of the tab item.
-     * Can be used to render an Icon.
+     * marker JSX slot. It can be StepItemIndicator or StepItemIcon
+     *
+     * ```jsx
+     * marker={<StepItemIndicator color="positive" />}
+     * marker={<StepItemIcon icon={CheckIcon} color="positive" />}
+     * ```
      */
-    leading?: IconComponent;
+    marker?: React__default.ReactElement;
     /**
-     * Trailing element of the tab item.
-     * Can be used to render a Badge/Counter component.
+     * trailing slot for StepItem. Mostly meant for Badge
      */
-    trailing?: React__default.ReactNode;
+    trailing?: React__default.ReactElement;
     /**
-     * Internal prop used to pass size from Tabs to TabsItem.
+     * Controlled state of selected item
      */
+    isSelected?: boolean;
     /**
-     * If `true`, the tab item will be disabled.
+     * Anchor tag's href value. Turns StepItem into interactive item and render it as `<a>` tag
      */
-    isDisabled?: boolean;
+    href?: LinkProps['href'];
     /**
-     * If set the tab item will be rendered as a link.
-     * This can be used to create a tab item that redirects to another page or integrate with react-router.
-     *
-     * @default undefined
+     * Anchjor tag's taget value. Meant to be used alongside `href` prop
      */
-    href?: string;
+    target?: LinkProps['target'];
     /**
-     * Callback fired when the tab item is clicked.
+     * StepItem's click handler. Turns StepItem into interactive item and render it as button tag
      */
     onClick?: (event: React__default.MouseEvent) => void;
-};
-type TabPanelProps = {
-    /**
-     * The value of the tab panel. This will be used to match the selected tab.
-     */
-    value: string;
     /**
-     * The content of the tab panel.
+     * Children slot for adding additional custom elements to item
      */
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
 };
 
 /**
- * ### Tabs
+ * ## StepGroup
  *
- * Check out the [Tab Stories & Examples](https://blade.razorpay.com/?path=/docs/components-tabs--default)
+ * Step Group visualises sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference.
  *
- * ----
- * ### Basic Usage
+ * ### Usage
  *
  * ```jsx
- * import { Tabs, TabList, TabItem, TabPanel } from '@razorpay/blade/components';
+ * <StepGroup orientation="vertical" size="medium">
+ *   <StepItem title="Personal Details" />
+ *   <StepItem title="Business Details" />
+ * </StepGroup>
+ * ```
  *
- * <Tabs variant="bordered" orientation="horizontal">
- *   <TabList>
- *     <TabItem value="subscriptions">Subscription</TabItem>
- *     <TabItem value="plans">Plans</TabItem>
- *     <TabItem value="settings">Settings</TabItem>
- *   </TabList>
+ * ---
  *
- *   <TabPanel value="subscriptions">
- *     <Text>Subscriptions Panel</Text>
- *   </TabPanel>
- *   <TabPanel value="plans">
- *     <Text>Plans Panel</Text>
- *   </TabPanel>
- *   <TabPanel value="settings">
- *     <Text>Settings Panel</Text>
- *   </TabPanel>
- * </Tabs>
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
+ */
+declare const StepGroup: ({ size, orientation, children, testID, _nestingLevel, width, minWidth, maxWidth, ...styledProps }: StepGroupProps) => React__default.ReactElement;
+
+/**
+ * ## StepItem
+ *
+ * Component meant to be used inside the StepGroup parent component
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * <StepGroup orientation="vertical" size="medium">
+ *   <StepItem
+ *      title="Personal Details"
+ *      timestamp="Thu 15th Oct'23 | 12:00pm"
+ *      description="Fill your personal details here"
+ *      marker={<StepItemIndicator color="negative" />}
+ *    />
+ * </StepGroup>
  * ```
+ *
+ * ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
  */
-declare const Tabs: ({ children, defaultValue, value, onChange, orientation, size, variant, isFullWidthTabItem, isLazy, }: TabsProps) => React__default.ReactElement;
+declare const StepItem: ({ title, timestamp, description, stepProgress, marker, trailing, isSelected, href, target, onClick, children, _index, _totalIndex, _nestingLevel, }: StepItemProps) => React__default.ReactElement;
 
-declare const TabItem: ({ children, value, leading: Leading, trailing, isDisabled, href, onClick, }: TabItemProps) => React__default.ReactElement;
+declare const StepItemIndicator: ({ color }: {
+    color: IndicatorProps['color'];
+}) => React.ReactElement;
+type StepItemIconProps = {
+    icon: IconComponent;
+    color: IndicatorProps['color'];
+};
+declare const StepItemIcon: ({ icon: Icon, color }: StepItemIconProps) => React.ReactElement;
 
-declare const TabList: ({ children, ...props }: {
-    children: React__default.ReactNode;
-} & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+type OnChange = ({ isChecked, value, event, }: {
+    isChecked: boolean;
+    event?: React.ChangeEvent;
+    value?: string;
+}) => void;
+type SwitchProps = {
+    /**
+     * If `true`, The switch will be checked. This also makes the switch controlled
+     * Use `onChange` to update its value
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * If `true`, the switch will be initially checked. This also makes the switch uncontrolled
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * The callback invoked when the checked state of the `Switch` changes.
+     */
+    onChange?: OnChange;
+    /**
+     * The name of the input field in a switch
+     * (Useful for form submission).
+     */
+    name?: string;
+    /**
+     * The value to be used in the switch input.
+     * This is the value that will be returned on form submission.
+     */
+    value?: string;
+    /**
+     * If `true`, the switch will be disabled
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Size of the switch
+     *
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Provides accessible label for internal checkbox component that sets the aria-label prop for screen readers.
+     */
+    accessibilityLabel: string;
+    /**
+     * The id of the input field in a switch, useful for associating a label element with the input via htmlFor prop
+     */
+    id?: string;
+} & TestID & StyledPropsBlade;
+
+declare const Switch: React__default.ForwardRefExoticComponent<{
+    isChecked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    onChange?: OnChange | undefined;
+    name?: string | undefined;
+    value?: string | undefined;
+    isDisabled?: boolean | undefined;
+    size?: "small" | "medium" | undefined;
+    accessibilityLabel: string;
+    id?: string | undefined;
+} & TestID & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
     bottom: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
@@ -11763,218 +11678,508 @@ declare const TabList: ({ children, ...props }: {
         readonly l?: "platform-web" | undefined;
         readonly xl?: "platform-web" | undefined;
     } | undefined;
-}, "visibility">, "__brand__">>) => React__default.ReactElement;
+}, "visibility">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+
+type TableNode<Item> = Item & {
+    id: Identifier;
+};
+type TableData<Item> = {
+    nodes: TableNode<Item>[];
+};
+type TableBackgroundColors = `surface.background.gray.${DotNotationToken<Theme['colors']['surface']['background']['gray']>}`;
+type TableHeaderProps = {
+    /**
+     * The children of TableHeader should be TableHeaderRow
+     * @example
+     * <TableHeader>
+     *   <TableHeaderRow>
+     *     <TableHeaderCell>Header Cell 1</TableHeaderCell>
+     *   </TableHeaderRow>
+     * </TableHeader>
+     **/
+    children: React.ReactNode;
+};
+type TableHeaderRowProps = {
+    /**
+     * The children of TableHeaderRow should be TableHeaderCell
+     * @example
+     * <TableHeader>
+     *   <TableHeaderRow>
+     *     <TableHeaderCell>Header Cell 1</TableHeaderCell>
+     *   </TableHeaderRow>
+     * </TableHeader>
+     **/
+    children: React.ReactNode;
+    /**
+     * The rowDensity prop determines the density of the table.
+     * The rowDensity prop can be 'compact', 'normal', or'comfortable'.
+     * The default value is `normal`.
+     **/
+    rowDensity?: TableProps<unknown>['rowDensity'];
+};
+type TableHeaderCellProps = {
+    /**
+     * The children of TableHeaderCell can be a string or a ReactNode.
+     **/
+    children: string | React.ReactNode;
+    /**
+     * The unique key of the column.
+     * This is used to identify the column for sorting in sortFunctions prop of Table.
+     * Sorting is enabled only for columns whose key is present in sortableColumns prop of Table.
+     **/
+    headerKey?: string;
+};
+type TableProps<Item> = {
+    /**
+     * The children of the Table component should be a function that returns TableHeader, TableBody and TableFooter components.
+     * The function will be called with the tableData prop.
+     */
+    children: (tableData: TableNode<Item>[]) => React.ReactElement;
+    /**
+     * The data prop is an object with a nodes property that is an array of objects.
+     * Each object in the array is a row in the table.
+     * The object should have an id property that is a unique identifier for the row.
+     */
+    data: TableData<Item>;
+    /**
+     * The selectionType prop determines the type of selection that is allowed on the table.
+     * The selectionType prop can be 'none', 'single' or 'multiple'.
+     * @default 'none'
+     **/
+    selectionType?: 'none' | 'single' | 'multiple';
+    /**
+     * The onSelectionChange prop is a function that is called when the selection changes.
+     * The function is called with an object that has a values property that is an array of the selected rows.
+     **/
+    onSelectionChange?: ({ values }: {
+        values: TableNode<Item>[];
+    }) => void;
+    /**
+     * The isHeaderSticky prop determines whether the table header is sticky or not.
+     * The default value is `false`.
+     **/
+    isHeaderSticky?: boolean;
+    /**
+     * The isFooterSticky prop determines whether the table footer is sticky or not.
+     * The default value is `false`.
+     **/
+    isFooterSticky?: boolean;
+    /**
+     * The isFirstColumnSticky prop determines whether the first column is sticky or not.
+     * The default value is `false`.
+     **/
+    isFirstColumnSticky?: boolean;
+    /**
+     * The rowDensity prop determines the density of the table.
+     * The rowDensity prop can be 'compact', 'normal', or'comfortable'.
+     * The default value is `normal`.
+     **/
+    rowDensity?: 'compact' | 'normal' | 'comfortable';
+    /**
+     * The onSortChange prop is a function that is called when the sort changes.
+     * The function is called with an object that has a sortKey property that is the key of the column that is sorted and a isSortReversed property that is a boolean that determines whether the sort is reversed or not.
+     **/
+    onSortChange?: ({ sortKey, isSortReversed, }: {
+        sortKey: TableHeaderCellProps['headerKey'];
+        isSortReversed: boolean;
+    }) => void;
+    /**
+     * The sortFunctions prop is an object that has a key for each column that is sortable.
+     * The value of each key is a function that is called when the column is sorted.
+     * The function is called with an array of the rows in the table.
+     * The function should return an array of the rows in the table.
+     **/
+    sortFunctions?: Record<string, (array: TableNode<Item>[]) => TableNode<Item>[]>;
+    /**
+     * The toolbar prop is a React element that is rendered above the table.
+     * The toolbar prop should be a `TableToolbar` component.
+     **/
+    toolbar?: React.ReactElement;
+    /**
+     * The pagination prop is a React element that is rendered below the table.
+     * The pagination prop should be a `TablePagination` component.
+     **/
+    pagination?: React.ReactElement;
+    /**
+     * The height prop is a responsive styled prop that determines the height of the table.
+     **/
+    height?: BoxProps['height'];
+    /**
+     * The showStripedRows prop determines whether the table should have striped rows or not.
+     * The default value is `false`.
+     **/
+    showStripedRows?: boolean;
+    /**
+     * The gridTemplateColumns prop determines the grid-template-columns CSS property of the table.
+     * The default value is `repeat(${columnCount},minmax(100px, 1fr))`.
+     **/
+    gridTemplateColumns?: string;
+    /**
+     * The isLoading prop determines whether the table is loading or not.
+     * The default value is `false`.
+     **/
+    isLoading?: boolean;
+    /**
+     * The isRefreshing prop determines whether the table is refreshing or not.
+     * The default value is `false`.
+     **/
+    isRefreshing?: boolean;
+} & StyledPropsBlade;
+type Identifier = string | number;
+type TableBodyProps = {
+    /**
+     * The children of the TableBody component should be TableRow components.
+     * @example
+     * <TableBody>
+     *   <TableRow>
+     *     <TableCell>...</TableCell>
+     *   </TableRow>
+     * </TableBody>
+     **/
+    children: React.ReactNode;
+};
+type TableRowProps<Item> = {
+    /**
+     * The children of the TableRow component should be TableCell components.
+     * @example
+     * <TableRow>
+     *   <TableCell>...</TableCell>
+     * </TableRow>
+     **/
+    children: React.ReactNode;
+    /**
+     * The item prop is used to pass the individual table item to the TableRow component.
+     * @example
+     * tableData.map((tableItem) => (
+     *   <TableRow item={item}>
+     *     <TableCell>...</TableCell>
+     *   </TableRow>
+     * ));
+     **/
+    item: TableNode<Item>;
+    /**
+     * The isDisabled prop is used to disable the TableRow component.
+     * @example
+     * <TableRow isDisabled>
+     *   <TableCell>...</TableCell>
+     * </TableRow>
+     **/
+    isDisabled?: boolean;
+    /**
+     * Callback triggered when the row is hovered. It is called with the current row item prop.
+     */
+    onHover?: ({ item }: {
+        item: TableNode<Item>;
+    }) => void;
+    /**
+     * Callback triggered when the row is clicked. It is called with the current row item prop.
+     */
+    onClick?: ({ item }: {
+        item: TableNode<Item>;
+    }) => void;
+};
+type TableCellProps = {
+    /**
+     * The children of the TableCell component should be a string or a ReactNode.
+     * @example
+     * <TableCell>{'Hello'}</TableCell>
+     * <TableCell>
+     *  <Text>...</Text>
+     * </TableCell>
+     * <TableCell>
+     * <Button>...</Button>
+     * </TableCell>
+     **/
+    children: React.ReactNode;
+};
+type TableFooterProps = {
+    /**
+     * The children of TableFooter should be TableFooterRow
+     * @example
+     * <TableFooter>
+     *   <TableFooterRow>
+     *     <TableFooterCell>Footer Cell 1</TableFooterCell>
+     *   </TableFooterRow>
+     * </TableFooter>
+     **/
+    children: React.ReactNode;
+};
+type TableFooterRowProps = {
+    /**
+     * The children of TableFooterRow should be TableFooterCell
+     * @example
+     * <TableFooter>
+     *   <TableFooterRow>
+     *     <TableFooterCell>Footer Cell 1</TableFooterCell>
+     *   </TableFooterRow>
+     * </TableFooter>
+     **/
+    children: React.ReactNode;
+};
+type TableFooterCellProps = {
+    /**
+     * The children of TableHeaderCell can be a string or a ReactNode.
+     **/
+    children: string | React.ReactNode;
+};
+type TablePaginationCommonProps = {
+    /**
+     * The default page size.
+     * Page size controls how rows are shown per page.
+     * @default 10
+     **/
+    defaultPageSize?: 10 | 25 | 50;
+    /**
+     * The current page. Passing this prop will make the component controlled and will not update the page on its own.
+     **/
+    currentPage?: number;
+    /**
+     * Callback function that is called when the page size is changed
+     */
+    onPageSizeChange?: ({ pageSize }: {
+        pageSize: number;
+    }) => void;
+    /**
+     * Whether to show the page size picker. It will be always be hidden on mobile.
+     * Page size picker controls how rows are shown per page.
+     * @default true
+     */
+    showPageSizePicker?: boolean;
+    /**
+     * Whether to show the page number selector. It will be always be hidden on mobile.
+     * Page number selectors is a group of buttons that allows the user to jump to a specific page.
+     * @default false
+     */
+    showPageNumberSelector?: boolean;
+    /**
+     * Content of the label to be shown in the pagination component
+     * @default `Showing 1 to ${totalItems} Items`
+     */
+    label?: string;
+    /**
+     * Whether to show the label. It will be always be hidden on mobile.
+     * @default false
+     */
+    showLabel?: boolean;
+};
+type TablePaginationType = 'client' | 'server';
+type TablePaginationServerProps = TablePaginationCommonProps & {
+    /**
+     * Whether the pagination is happening on client or server.
+     * If the pagination is happening on `client`, the Table component will **divide the data into pages** and show the pages based on the page size.
+     * If the pagination is happening on `server`, the Table component will **not divide the data into pages and will show all the data**. You will have to fetch data for each page as the page changes and pass it to the Table component.
+     * When paginationType is `server`, the `onPageChange` & `totalItemCount` props are required.
+     * @default 'client'
+     * */
+    paginationType?: Extract<TablePaginationType, 'server'>;
+    /**
+     * The total number of possible items in the table. This is used to calculate the total number of pages when pagination is happening on server and not all the data is fetched at once.
+     */
+    totalItemCount: number;
+    /**
+     * Callback function that is called when the page is changed
+     */
+    onPageChange: ({ page }: {
+        page: number;
+    }) => void;
+};
+type TablePaginationClientProps = TablePaginationCommonProps & {
+    /**
+     * Whether the pagination is happening on client or server.
+     * If the pagination is happening on `client`, the Table component will **divide the data into pages** and show the pages based on the page size.
+     * If the pagination is happening on `server`, the Table component will **not divide the data into pages and will show all the data**. You will have to fetch data for each page as the page changes and pass it to the Table component.
+     * When paginationType is `server`, the `onPageChange` & `totalItemCount` props are required.
+     * @default 'client'
+     * */
+    paginationType?: Extract<TablePaginationType, 'client'>;
+    /**
+     * The total number of possible items in the table. This is used to calculate the total number of pages when pagination is happening on server and not all the data is fetched at once.
+     */
+    totalItemCount?: number;
+    /**
+     * Callback function that is called when the page is changed
+     */
+    onPageChange?: ({ page }: {
+        page: number;
+    }) => void;
+};
+type TablePaginationProps = TablePaginationCommonProps & (TablePaginationServerProps | TablePaginationClientProps);
+type TableToolbarProps = {
+    /**
+     * The children of TableToolbar should be TableToolbarActions
+     */
+    children?: React.ReactNode;
+    /**
+     * The title of the TableToolbar. If not provided, it will show the default title.
+     * @default `Showing 1 to ${totalItems} Items`
+     */
+    title?: string;
+    /**
+     * The title to show when items are selected. If not provided, it will show the default title.
+     * @default `${selectedRows.length} 'Items'} Selected`
+     */
+    selectedTitle?: string;
+};
+type TableToolbarActionsProps = {
+    children?: React.ReactNode;
+} & StyledPropsBlade;
 
-declare const TabPanel: ({ children, value }: TabPanelProps) => React__default.ReactElement;
+declare const Table: <Item>({ children, data, selectionType, onSelectionChange, isHeaderSticky, isFooterSticky, isFirstColumnSticky, rowDensity, onSortChange, sortFunctions, toolbar, pagination, height, showStripedRows, gridTemplateColumns, isLoading, isRefreshing, ...styledProps }: TableProps<Item>) => React__default.ReactElement;
 
-type TagProps = {
+declare const TableHeader: ({ children }: TableHeaderRowProps) => React__default.ReactElement;
+declare const TableHeaderCell: ({ children, headerKey }: TableHeaderCellProps) => React__default.ReactElement;
+declare const TableHeaderRow: ({ children, rowDensity }: TableHeaderRowProps) => React__default.ReactElement;
+
+declare const TableBody: ({ children }: TableBodyProps) => React__default.ReactElement;
+declare const TableCell: ({ children }: TableCellProps) => React__default.ReactElement;
+declare const TableRow: <Item>({ children, item, isDisabled, onHover, onClick, }: TableRowProps<Item>) => React__default.ReactElement;
+
+declare const TableFooter: ({ children }: TableFooterProps) => React__default.ReactElement;
+declare const TableFooterRow: ({ children }: TableFooterRowProps) => React__default.ReactElement;
+declare const TableFooterCell: ({ children }: TableFooterCellProps) => React__default.ReactElement;
+
+declare const TablePagination: ({ currentPage: controlledCurrentPage, onPageChange, onPageSizeChange, defaultPageSize, showPageSizePicker, showPageNumberSelector, showLabel, label, totalItemCount, paginationType, }: TablePaginationProps) => React__default.ReactElement;
+
+declare const TableToolbarActions: ({ children, ...styledProps }: TableToolbarActionsProps) => React__default.ReactElement;
+declare const TableToolbar: ({ children, title, selectedTitle: controlledSelectedTitle, }: TableToolbarProps) => React__default.ReactElement;
+
+type TabsProps = {
     /**
-     * Decides the size of Tag
-     *
-     * @default medium
+     * The content of the component, accepts `TabsList` and `TabsPanel` components.
      */
-    size?: 'medium' | 'large';
+    children: React__default.ReactNode;
     /**
-     * Leading icon for your Tag
+     * The value of the tab panel same as the corresponding TabItem's value to match the selected TabItem.
      */
-    icon?: IconComponent;
+    value?: string;
     /**
-     * Callback when close icon on Tag is clicked
+     * The default value of the selected tab, in case the Tabs component is uncontrolled.
      */
-    onDismiss: () => void;
+    defaultValue?: string;
     /**
-     * Text that renders inside Tag
+     * Callback fired when the value changes.
      */
-    children: StringChildrenType;
+    onChange?: (value: string) => void;
     /**
-     * Disable tag
+     * The orientation of the tabs.
+     *
+     * @default 'horizontal' (always horizontal on react-native)
      */
-    isDisabled?: boolean;
+    orientation?: Platform.Select<{
+        web: 'horizontal' | 'vertical';
+        native: 'horizontal';
+    }>;
     /**
-     * Private property for Blade.
-     *
-     * Should not be used by consumers.
-     *
-     * Used for adding virtual focus on tag.
+     * The size of the tabs.
      *
-     * @private
+     * @default 'medium'
      */
-    _isVirtuallyFocused?: boolean;
+    size?: 'medium' | 'large';
     /**
-     * Private property for Blade.
+     * The variant of the tabs.
      *
-     * Should not be used by consumers.
+     * @default 'bordered'
+     */
+    variant?: 'bordered' | 'borderless' | 'filled';
+    /**
+     * If `true`, the TabItems will grow to use all the available space.
      *
-     * Is tag placed inside an input
+     * @default false
+     */
+    isFullWidthTabItem?: boolean;
+    /**
+     * If `true`, the TabPanel will be rendered only when it becomes active.
      *
-     * @private
+     * @default false
      */
-    _isTagInsideInput?: boolean;
-} & StyledPropsBlade & TestID;
-
-/**
- * ## Tags
- *
- * Tag component can be used to display selected items on UI.
- *
- * ### Usage
- *
- * ***Note:*** _Make sure to handle state when using Tag_
- *
- * ```jsx
- * const [showTag, setShowTag] = React.useState(true);
- *
- * // ...
- *
- * {showTag && (
- *  <Tag
- *    icon={CheckIcon}
- *    onDismiss={() => setShowTag(false)}
- *  >
- *    Transactions
- *  </Tag>
- * )}
- * ```
- *
- * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.
- *
- */
-declare const Tag: ({ size, icon: Icon, onDismiss, children, isDisabled, testID, _isVirtuallyFocused, _isTagInsideInput, ...styledProps }: TagProps) => React__default.ReactElement | null;
-
-type TooltipProps = {
+    isLazy?: boolean;
+};
+type TabItemProps = {
     /**
-     * Tooltip title
+     * The label of the tab item.
      */
-    title?: string;
+    children: React__default.ReactNode;
     /**
-     * Tooltip content
+     * The value of the tab item.
      */
-    content: string;
+    value: string;
     /**
-     * Placement of tooltip
+     * Leading element of the tab item.
+     * Can be used to render an Icon.
+     */
+    leading?: IconComponent;
+    /**
+     * Trailing element of the tab item.
+     * Can be used to render a Badge/Counter component.
+     */
+    trailing?: React__default.ReactNode;
+    /**
+     * Internal prop used to pass size from Tabs to TabsItem.
+     */
+    /**
+     * If `true`, the tab item will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * If set the tab item will be rendered as a link.
+     * This can be used to create a tab item that redirects to another page or integrate with react-router.
      *
-     * @default "top"
+     * @default undefined
      */
-    placement?: Exclude<UseFloatingOptions['placement'], 'left-end' | 'left-start' | 'right-end' | 'right-start'>;
-    children: React.ReactElement;
-    onOpenChange?: ({ isOpen }: {
-        isOpen: boolean;
-    }) => void;
+    href?: string;
+    /**
+     * Callback fired when the tab item is clicked.
+     */
+    onClick?: (event: React__default.MouseEvent) => void;
+};
+type TabPanelProps = {
+    /**
+     * The value of the tab panel. This will be used to match the selected tab.
+     */
+    value: string;
     /**
-     * Sets the z-index of the modal
-     * @default 1100
+     * The content of the tab panel.
      */
-    zIndex?: number;
+    children: React__default.ReactNode;
 };
 
-declare const Tooltip: ({ title, content, children, placement, onOpenChange, zIndex, }: TooltipProps) => React__default.ReactElement;
+/**
+ * ### Tabs
+ *
+ * Check out the [Tab Stories & Examples](https://blade.razorpay.com/?path=/docs/components-tabs--default)
+ *
+ * ----
+ * ### Basic Usage
+ *
+ * ```jsx
+ * import { Tabs, TabList, TabItem, TabPanel } from '@razorpay/blade/components';
+ *
+ * <Tabs variant="bordered" orientation="horizontal">
+ *   <TabList>
+ *     <TabItem value="subscriptions">Subscription</TabItem>
+ *     <TabItem value="plans">Plans</TabItem>
+ *     <TabItem value="settings">Settings</TabItem>
+ *   </TabList>
+ *
+ *   <TabPanel value="subscriptions">
+ *     <Text>Subscriptions Panel</Text>
+ *   </TabPanel>
+ *   <TabPanel value="plans">
+ *     <Text>Plans Panel</Text>
+ *   </TabPanel>
+ *   <TabPanel value="settings">
+ *     <Text>Settings Panel</Text>
+ *   </TabPanel>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: ({ children, defaultValue, value, onChange, orientation, size, variant, isFullWidthTabItem, isLazy, }: TabsProps) => React__default.ReactElement;
 
-declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, Omit<Partial<PaddingProps & MarginProps & {
-    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;
-} & FlexboxProps & {
+declare const TabItem: ({ children, value, leading: Leading, trailing, isDisabled, href, onClick, }: TabItemProps) => React__default.ReactElement;
+
+declare const TabList: ({ children, ...props }: {
+    children: React__default.ReactNode;
+} & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
     bottom: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
@@ -12031,7 +12236,7 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         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;
@@ -12128,29 +12333,134 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         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;
+    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;
-    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;
+    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;
-    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;
+    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;
@@ -12160,20 +12470,7 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         readonly l?: "platform-web" | undefined;
         readonly xl?: "platform-web" | undefined;
     } | undefined;
-} & {
-    onMouseOver: React$1.MouseEventHandler<HTMLElement>;
-    onMouseEnter: React$1.MouseEventHandler<HTMLElement>;
-    onMouseLeave: React$1.MouseEventHandler<HTMLElement>;
-    onScroll: React$1.UIEventHandler<HTMLElement>;
-} & {
-    draggable: boolean;
-    onDragStart: React$1.DragEventHandler<HTMLElement>;
-    onDragEnter: React$1.DragEventHandler<HTMLElement>;
-    onDragLeave: React$1.DragEventHandler<HTMLElement>;
-    onDragOver: React$1.DragEventHandler<HTMLElement>;
-    onDragEnd: React$1.DragEventHandler<HTMLElement>;
-    onDrop: React$1.DragEventHandler<HTMLElement>;
-} & {
+}, "display"> & Pick<{
     elevation?: ElevationLevels | {
         readonly base?: ElevationLevels | undefined;
         readonly xs?: ElevationLevels | undefined;
@@ -12438,128 +12735,83 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         readonly l?: "platform-web" | undefined;
         readonly xl?: "platform-web" | undefined;
     } | undefined;
-} & MakeObjectResponsive<{
-    backgroundColor: "transparent" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense";
-}, "backgroundColor"> & {
-    as: "aside" | "div" | "footer" | "header" | "label" | "main" | "nav" | "section" | "span";
-} & {
-    children?: React$1.ReactNode | React$1.ReactNode[];
-    tabIndex?: number | undefined;
-    id?: string | undefined;
-} & TestID>, "backgroundColor" | "as"> & Partial<{
-    border?: csstype.Property.Border<string | number> | {
-        readonly base?: csstype.Property.Border<string | number> | undefined;
-        readonly xs?: csstype.Property.Border<string | number> | undefined;
-        readonly s?: csstype.Property.Border<string | number> | undefined;
-        readonly m?: csstype.Property.Border<string | number> | undefined;
-        readonly l?: csstype.Property.Border<string | number> | undefined;
-        readonly xl?: csstype.Property.Border<string | number> | undefined;
-    } | undefined;
-    backgroundColor: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | {
-        readonly base?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
-        readonly xs?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
-        readonly s?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
-        readonly m?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
-        readonly l?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
-        readonly xl?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
-    };
-    cursor?: csstype.Property.Cursor | {
-        readonly base?: csstype.Property.Cursor | undefined;
-        readonly xs?: csstype.Property.Cursor | undefined;
-        readonly s?: csstype.Property.Cursor | undefined;
-        readonly m?: csstype.Property.Cursor | undefined;
-        readonly l?: csstype.Property.Cursor | undefined;
-        readonly xl?: csstype.Property.Cursor | undefined;
-    } | undefined;
-    lineHeight: 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;
-    };
-    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;
-    touchAction: csstype.Property.TouchAction | {
-        readonly base?: csstype.Property.TouchAction | undefined;
-        readonly xs?: csstype.Property.TouchAction | undefined;
-        readonly s?: csstype.Property.TouchAction | undefined;
-        readonly m?: csstype.Property.TouchAction | undefined;
-        readonly l?: csstype.Property.TouchAction | undefined;
-        readonly xl?: csstype.Property.TouchAction | undefined;
-    } | undefined;
-    userSelect: csstype.Property.UserSelect | {
-        readonly base?: csstype.Property.UserSelect | undefined;
-        readonly xs?: csstype.Property.UserSelect | undefined;
-        readonly s?: csstype.Property.UserSelect | undefined;
-        readonly m?: csstype.Property.UserSelect | undefined;
-        readonly l?: csstype.Property.UserSelect | undefined;
-        readonly xl?: csstype.Property.UserSelect | undefined;
-    } | undefined;
-    borderBottom?: csstype.Property.BorderBottom<string | number> | {
-        readonly base?: csstype.Property.BorderBottom<string | number> | undefined;
-        readonly xs?: csstype.Property.BorderBottom<string | number> | undefined;
-        readonly s?: csstype.Property.BorderBottom<string | number> | undefined;
-        readonly m?: csstype.Property.BorderBottom<string | number> | undefined;
-        readonly l?: csstype.Property.BorderBottom<string | number> | undefined;
-        readonly xl?: csstype.Property.BorderBottom<string | number> | undefined;
-    } | undefined;
-    borderLeft?: csstype.Property.BorderLeft<string | number> | {
-        readonly base?: csstype.Property.BorderLeft<string | number> | undefined;
-        readonly xs?: csstype.Property.BorderLeft<string | number> | undefined;
-        readonly s?: csstype.Property.BorderLeft<string | number> | undefined;
-        readonly m?: csstype.Property.BorderLeft<string | number> | undefined;
-        readonly l?: csstype.Property.BorderLeft<string | number> | undefined;
-        readonly xl?: csstype.Property.BorderLeft<string | number> | undefined;
-    } | undefined;
-    borderRight?: csstype.Property.BorderRight<string | number> | {
-        readonly base?: csstype.Property.BorderRight<string | number> | undefined;
-        readonly xs?: csstype.Property.BorderRight<string | number> | undefined;
-        readonly s?: csstype.Property.BorderRight<string | number> | undefined;
-        readonly m?: csstype.Property.BorderRight<string | number> | undefined;
-        readonly l?: csstype.Property.BorderRight<string | number> | undefined;
-        readonly xl?: csstype.Property.BorderRight<string | number> | undefined;
-    } | undefined;
-    borderTop?: csstype.Property.BorderTop<string | number> | {
-        readonly base?: csstype.Property.BorderTop<string | number> | undefined;
-        readonly xs?: csstype.Property.BorderTop<string | number> | undefined;
-        readonly s?: csstype.Property.BorderTop<string | number> | undefined;
-        readonly m?: csstype.Property.BorderTop<string | number> | undefined;
-        readonly l?: csstype.Property.BorderTop<string | number> | undefined;
-        readonly xl?: csstype.Property.BorderTop<string | number> | 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;
-} & {
-    className?: string | undefined;
-    id?: string | undefined;
-    tabIndex?: number | undefined;
-}> & BladeCommonEvents & {
-    'data-blade-component'?: string | undefined;
-    'data-testid'?: string | undefined;
-    tabIndex: -1;
-}, "tabIndex" | "data-testid" | "data-blade-component">;
+}, "visibility">, "__brand__">>) => React__default.ReactElement;
+
+declare const TabPanel: ({ children, value }: TabPanelProps) => React__default.ReactElement;
+
+type TagProps = {
+    /**
+     * Decides the size of Tag
+     *
+     * @default medium
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Leading icon for your Tag
+     */
+    icon?: IconComponent;
+    /**
+     * Callback when close icon on Tag is clicked
+     */
+    onDismiss: () => void;
+    /**
+     * Text that renders inside Tag
+     */
+    children: StringChildrenType;
+    /**
+     * Disable tag
+     */
+    isDisabled?: boolean;
+    /**
+     * Private property for Blade.
+     *
+     * Should not be used by consumers.
+     *
+     * Used for adding virtual focus on tag.
+     *
+     * @private
+     */
+    _isVirtuallyFocused?: boolean;
+    /**
+     * Private property for Blade.
+     *
+     * Should not be used by consumers.
+     *
+     * Is tag placed inside an input
+     *
+     * @private
+     */
+    _isTagInsideInput?: boolean;
+} & StyledPropsBlade & TestID;
+
+/**
+ * ## Tags
+ *
+ * Tag component can be used to display selected items on UI.
+ *
+ * ### Usage
+ *
+ * ***Note:*** _Make sure to handle state when using Tag_
+ *
+ * ```jsx
+ * const [showTag, setShowTag] = React.useState(true);
+ *
+ * // ...
+ *
+ * {showTag && (
+ *  <Tag
+ *    icon={CheckIcon}
+ *    onDismiss={() => setShowTag(false)}
+ *  >
+ *    Transactions
+ *  </Tag>
+ * )}
+ * ```
+ *
+ * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.
+ *
+ */
+declare const Tag: ({ size, icon: Icon, onDismiss, children, isDisabled, testID, _isVirtuallyFocused, _isTagInsideInput, ...styledProps }: TagProps) => React__default.ReactElement | null;
 
 declare const ToastContainer: () => React__default.ReactElement;
 
@@ -12642,4 +12894,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, 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 };
+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, SideNav, SideNavBody, SideNavFooter, SideNavFooterProps, SideNavItem, SideNavItemProps, SideNavLevel, SideNavLink, SideNavLinkProps, SideNavProps, SideNavSection, SideNavSectionProps, 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, drawerPadding, getHeadingProps, getTextProps, screenReaderStyles, useTheme, useToast };