@razorpay/blade 11.6.3 → 11.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/build/lib/native/components/Accordion/Accordion.js +2 -2
  2. package/build/lib/native/components/Accordion/Accordion.js.map +1 -1
  3. package/build/lib/native/components/Accordion/AccordionButton.native.js +2 -2
  4. package/build/lib/native/components/Accordion/AccordionButton.native.js.map +1 -1
  5. package/build/lib/native/components/Accordion/AccordionContext.js +2 -2
  6. package/build/lib/native/components/Accordion/AccordionContext.js.map +1 -1
  7. package/build/lib/native/components/Accordion/AccordionItem.js +11 -14
  8. package/build/lib/native/components/Accordion/AccordionItem.js.map +1 -1
  9. package/build/lib/native/components/Accordion/AccordionItemBody.js +24 -0
  10. package/build/lib/native/components/Accordion/AccordionItemBody.js.map +1 -0
  11. package/build/lib/native/components/Accordion/AccordionItemHeader.js +24 -0
  12. package/build/lib/native/components/Accordion/AccordionItemHeader.js.map +1 -0
  13. package/build/lib/native/components/Accordion/commonStyles.js +1 -1
  14. package/build/lib/native/components/Accordion/commonStyles.js.map +1 -1
  15. package/build/lib/native/components/Accordion/componentIds.js +4 -0
  16. package/build/lib/native/components/Accordion/componentIds.js.map +1 -0
  17. package/build/lib/native/components/ActionList/ActionListBox.native.js +1 -4
  18. package/build/lib/native/components/ActionList/ActionListBox.native.js.map +1 -1
  19. package/build/lib/native/components/BaseHeaderFooter/BaseHeader.js +1 -1
  20. package/build/lib/native/components/BaseHeaderFooter/BaseHeader.js.map +1 -1
  21. package/build/lib/native/components/Button/BaseButton/AnimatedButtonContent.native.js +16 -0
  22. package/build/lib/native/components/Button/BaseButton/AnimatedButtonContent.native.js.map +1 -0
  23. package/build/lib/native/components/Button/BaseButton/BaseButton.js +7 -5
  24. package/build/lib/native/components/Button/BaseButton/BaseButton.js.map +1 -1
  25. package/build/lib/native/components/Button/BaseButton/StyledBaseButton.native.js +1 -1
  26. package/build/lib/native/components/Button/BaseButton/StyledBaseButton.native.js.map +1 -1
  27. package/build/lib/native/components/ButtonGroup/ButtonGroup.native.js +7 -0
  28. package/build/lib/native/components/ButtonGroup/ButtonGroup.native.js.map +1 -0
  29. package/build/lib/native/components/ButtonGroup/ButtonGroupContext.js +6 -0
  30. package/build/lib/native/components/ButtonGroup/ButtonGroupContext.js.map +1 -0
  31. package/build/lib/native/components/Collapsible/CollapsibleBodyContent.native.js.map +1 -1
  32. package/build/lib/native/components/index.js +3 -0
  33. package/build/lib/native/components/index.js.map +1 -1
  34. package/build/lib/native/utils/metaAttribute/metaConstants.js +1 -1
  35. package/build/lib/native/utils/metaAttribute/metaConstants.js.map +1 -1
  36. package/build/lib/web/development/components/Accordion/Accordion.js +57 -6
  37. package/build/lib/web/development/components/Accordion/Accordion.js.map +1 -1
  38. package/build/lib/web/development/components/Accordion/AccordionButton.web.js +21 -25
  39. package/build/lib/web/development/components/Accordion/AccordionButton.web.js.map +1 -1
  40. package/build/lib/web/development/components/Accordion/AccordionContext.js +16 -1
  41. package/build/lib/web/development/components/Accordion/AccordionContext.js.map +1 -1
  42. package/build/lib/web/development/components/Accordion/AccordionItem.js +66 -66
  43. package/build/lib/web/development/components/Accordion/AccordionItem.js.map +1 -1
  44. package/build/lib/web/development/components/Accordion/AccordionItemBody.js +84 -0
  45. package/build/lib/web/development/components/Accordion/AccordionItemBody.js.map +1 -0
  46. package/build/lib/web/development/components/Accordion/AccordionItemHeader.js +71 -0
  47. package/build/lib/web/development/components/Accordion/AccordionItemHeader.js.map +1 -0
  48. package/build/lib/web/development/components/Accordion/StyledAccordionButton.web.js +3 -2
  49. package/build/lib/web/development/components/Accordion/StyledAccordionButton.web.js.map +1 -1
  50. package/build/lib/web/development/components/Accordion/commonStyles.js +8 -6
  51. package/build/lib/web/development/components/Accordion/commonStyles.js.map +1 -1
  52. package/build/lib/web/development/components/Accordion/componentIds.js +8 -0
  53. package/build/lib/web/development/components/Accordion/componentIds.js.map +1 -0
  54. package/build/lib/web/development/components/Accordion/index.js +2 -0
  55. package/build/lib/web/development/components/Accordion/index.js.map +1 -1
  56. package/build/lib/web/development/components/BaseHeaderFooter/BaseHeader.js +131 -68
  57. package/build/lib/web/development/components/BaseHeaderFooter/BaseHeader.js.map +1 -1
  58. package/build/lib/web/development/components/Button/BaseButton/AnimatedButtonContent.web.js +18 -0
  59. package/build/lib/web/development/components/Button/BaseButton/AnimatedButtonContent.web.js.map +1 -0
  60. package/build/lib/web/development/components/Button/BaseButton/BaseButton.js +116 -66
  61. package/build/lib/web/development/components/Button/BaseButton/BaseButton.js.map +1 -1
  62. package/build/lib/web/development/components/ButtonGroup/ButtonGroup.web.js +158 -0
  63. package/build/lib/web/development/components/ButtonGroup/ButtonGroup.web.js.map +1 -0
  64. package/build/lib/web/development/components/ButtonGroup/ButtonGroupContext.js +11 -0
  65. package/build/lib/web/development/components/ButtonGroup/ButtonGroupContext.js.map +1 -0
  66. package/build/lib/web/development/components/ButtonGroup/StyledButtonGroup.js +47 -0
  67. package/build/lib/web/development/components/ButtonGroup/StyledButtonGroup.js.map +1 -0
  68. package/build/lib/web/development/components/ButtonGroup/index.js +2 -0
  69. package/build/lib/web/development/components/ButtonGroup/index.js.map +1 -0
  70. package/build/lib/web/development/components/Collapsible/CollapsibleBodyContent.web.js +3 -1
  71. package/build/lib/web/development/components/Collapsible/CollapsibleBodyContent.web.js.map +1 -1
  72. package/build/lib/web/development/components/index.js +4 -0
  73. package/build/lib/web/development/components/index.js.map +1 -1
  74. package/build/lib/web/development/utils/metaAttribute/metaConstants.js +3 -0
  75. package/build/lib/web/development/utils/metaAttribute/metaConstants.js.map +1 -1
  76. package/build/lib/web/production/components/Accordion/Accordion.js +57 -6
  77. package/build/lib/web/production/components/Accordion/Accordion.js.map +1 -1
  78. package/build/lib/web/production/components/Accordion/AccordionButton.web.js +21 -25
  79. package/build/lib/web/production/components/Accordion/AccordionButton.web.js.map +1 -1
  80. package/build/lib/web/production/components/Accordion/AccordionContext.js +16 -1
  81. package/build/lib/web/production/components/Accordion/AccordionContext.js.map +1 -1
  82. package/build/lib/web/production/components/Accordion/AccordionItem.js +66 -66
  83. package/build/lib/web/production/components/Accordion/AccordionItem.js.map +1 -1
  84. package/build/lib/web/production/components/Accordion/AccordionItemBody.js +84 -0
  85. package/build/lib/web/production/components/Accordion/AccordionItemBody.js.map +1 -0
  86. package/build/lib/web/production/components/Accordion/AccordionItemHeader.js +71 -0
  87. package/build/lib/web/production/components/Accordion/AccordionItemHeader.js.map +1 -0
  88. package/build/lib/web/production/components/Accordion/StyledAccordionButton.web.js +3 -2
  89. package/build/lib/web/production/components/Accordion/StyledAccordionButton.web.js.map +1 -1
  90. package/build/lib/web/production/components/Accordion/commonStyles.js +8 -6
  91. package/build/lib/web/production/components/Accordion/commonStyles.js.map +1 -1
  92. package/build/lib/web/production/components/Accordion/componentIds.js +8 -0
  93. package/build/lib/web/production/components/Accordion/componentIds.js.map +1 -0
  94. package/build/lib/web/production/components/Accordion/index.js +2 -0
  95. package/build/lib/web/production/components/Accordion/index.js.map +1 -1
  96. package/build/lib/web/production/components/BaseHeaderFooter/BaseHeader.js +131 -68
  97. package/build/lib/web/production/components/BaseHeaderFooter/BaseHeader.js.map +1 -1
  98. package/build/lib/web/production/components/Button/BaseButton/AnimatedButtonContent.web.js +18 -0
  99. package/build/lib/web/production/components/Button/BaseButton/AnimatedButtonContent.web.js.map +1 -0
  100. package/build/lib/web/production/components/Button/BaseButton/BaseButton.js +116 -66
  101. package/build/lib/web/production/components/Button/BaseButton/BaseButton.js.map +1 -1
  102. package/build/lib/web/production/components/ButtonGroup/ButtonGroup.web.js +158 -0
  103. package/build/lib/web/production/components/ButtonGroup/ButtonGroup.web.js.map +1 -0
  104. package/build/lib/web/production/components/ButtonGroup/ButtonGroupContext.js +11 -0
  105. package/build/lib/web/production/components/ButtonGroup/ButtonGroupContext.js.map +1 -0
  106. package/build/lib/web/production/components/ButtonGroup/StyledButtonGroup.js +47 -0
  107. package/build/lib/web/production/components/ButtonGroup/StyledButtonGroup.js.map +1 -0
  108. package/build/lib/web/production/components/ButtonGroup/index.js +2 -0
  109. package/build/lib/web/production/components/ButtonGroup/index.js.map +1 -0
  110. package/build/lib/web/production/components/Collapsible/CollapsibleBodyContent.web.js +3 -1
  111. package/build/lib/web/production/components/Collapsible/CollapsibleBodyContent.web.js.map +1 -1
  112. package/build/lib/web/production/components/index.js +4 -0
  113. package/build/lib/web/production/components/index.js.map +1 -1
  114. package/build/lib/web/production/utils/metaAttribute/metaConstants.js +3 -0
  115. package/build/lib/web/production/utils/metaAttribute/metaConstants.js.map +1 -1
  116. package/build/types/components/index.d.ts +1120 -965
  117. package/build/types/components/index.native.d.ts +1091 -962
  118. package/package.json +2 -2
@@ -4,8 +4,8 @@ import React__default, { ReactNode, ReactElement, ReactChild, SyntheticEvent, Ke
4
4
  import { View, ViewStyle, AccessibilityRole, GestureResponderEvent } from 'react-native';
5
5
  import * as styled_components from 'styled-components';
6
6
  import { CSSObject } from 'styled-components';
7
- import { CurrencyCodeType } from '@razorpay/i18nify-js/currency';
8
7
  import { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';
8
+ import { CurrencyCodeType } from '@razorpay/i18nify-js/currency';
9
9
  import * as csstype from 'csstype';
10
10
  import { Placement, UseFloatingOptions } from '@floating-ui/react';
11
11
  import { Toast } from 'react-hot-toast';
@@ -1349,35 +1349,6 @@ type BoxRefType = Platform.Select<{
1349
1349
  native: View;
1350
1350
  }>;
1351
1351
 
1352
- type AccordionProps = {
1353
- /**
1354
- * Makes the passed item index expanded by default (uncontrolled)
1355
- */
1356
- defaultExpandedIndex?: number;
1357
- /**
1358
- * Expands the passed index (controlled), `-1` implies no expanded items
1359
- */
1360
- expandedIndex?: number;
1361
- /**
1362
- * Callback for change in any item's expanded state,
1363
- * `-1` implies no expanded items
1364
- */
1365
- onExpandChange?: ({ expandedIndex }: {
1366
- expandedIndex: number;
1367
- }) => void;
1368
- /**
1369
- * Adds numeric index at the beginning of items
1370
- *
1371
- * @default false
1372
- */
1373
- showNumberPrefix?: boolean;
1374
- /**
1375
- * Accepts `AccordionItem` child nodes
1376
- */
1377
- children: ReactElement | ReactElement[];
1378
- } & TestID & StyledPropsBlade;
1379
- declare const Accordion: ({ defaultExpandedIndex, expandedIndex, onExpandChange, showNumberPrefix, children, testID, ...styledProps }: AccordionProps) => ReactElement;
1380
-
1381
1352
  declare const ArrowDownIcon: IconComponent;
1382
1353
 
1383
1354
  declare const ArrowLeftIcon: IconComponent;
@@ -1936,922 +1907,88 @@ type IconProps = {
1936
1907
  } & StyledPropsBlade;
1937
1908
  type IconComponent = React.ComponentType<IconProps>;
1938
1909
 
1939
- type AccordionItemProps = {
1940
- /**
1941
- * Title text content
1942
- */
1943
- title: string;
1944
- /**
1945
- * Body text content
1946
- */
1947
- description?: string;
1948
- /**
1949
- * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)
1950
- */
1951
- icon?: IconComponent;
1952
- /**
1953
- * Slot, renders any custom content
1954
- */
1955
- children?: ReactNode;
1956
- /**
1957
- * **Internal:** used for determining numbering, you don't need to pass this,
1958
- * instead pass `showNumberPrefix` to root `Accordion`
1959
- */
1960
- _index?: number;
1961
- } & TestID;
1962
- declare const AccordionItem: ({ title, description, icon, children, _index, testID, }: AccordionItemProps) => ReactElement;
1963
-
1964
- type ActionListProps = {
1965
- children: React__default.ReactNode[];
1966
- } & TestID;
1967
- /**
1968
- * ### ActionList
1969
- *
1970
- * List of multiple actionable items. Can be used as menu items inside `Dropdown`,
1971
- * `BottomSheet` and as selectable items when combined with `SelectInput`
1972
- *
1973
- * #### Usage
1974
- *
1975
- * ```jsx
1976
- * <Dropdown>
1977
- * <SelectInput label="Select Action" />
1978
- * <DropdownOverlay>
1979
- * <DropdownHeader title="Header Title" />
1980
- * <ActionList>
1981
- * <ActionListItem
1982
- * title="Home"
1983
- * value="home"
1984
- * leading={<ActionListItemIcon icon={HomeIcon} />}
1985
- * />
1986
- * <ActionListItem
1987
- * title="Pricing"
1988
- * value="pricing"
1989
- * leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
1990
- * />
1991
- * </ActionList>
1992
- * <DropdownFooter><Button>Apply</Button></DropdownFooter>
1993
- * </DropdownOverlay>
1994
- * </Dropdown>
1995
- * ```
1996
- *
1997
- */
1998
- declare const ActionList: React__default.MemoExoticComponent<({ children, testID }: ActionListProps) => React__default.ReactElement>;
1999
-
2000
- type BadgeProps = {
2001
- /**
2002
- * Sets the label for the badge.
2003
- *
2004
- */
2005
- children: StringChildrenType;
2006
- /**
2007
- * Sets the color of the badge.
2008
- *
2009
- * @default 'neutral'
2010
- */
2011
- color?: FeedbackColors | 'primary';
1910
+ type AccordionVariantType = 'filled' | 'transparent';
1911
+ type AccordionProps = {
2012
1912
  /**
2013
- * Sets the contrast of the badge.
2014
- *
2015
- * @default 'subtle'
1913
+ * Makes the passed item index expanded by default (uncontrolled)
2016
1914
  */
2017
- emphasis?: SubtleOrIntense;
1915
+ defaultExpandedIndex?: number;
2018
1916
  /**
2019
- * Sets the size of the badge.
2020
- *
2021
- * @default 'medium'
1917
+ * Expands the passed index (controlled), `-1` implies no expanded items
2022
1918
  */
2023
- size?: 'small' | 'medium' | 'large';
1919
+ expandedIndex?: number;
2024
1920
  /**
2025
- * Icon to be displayed in the badge.
2026
- * Accepts a component of type `IconComponent` from Blade.
2027
- *
1921
+ * Callback for change in any item's expanded state,
1922
+ * `-1` implies no expanded items
2028
1923
  */
2029
- icon?: IconComponent;
2030
- } & TestID & StyledPropsBlade;
2031
- declare const Badge: ({ children, emphasis, icon: Icon, size, color, testID, ...styledProps }: BadgeProps) => ReactElement;
2032
-
2033
- type ActionListItemProps = {
2034
- title: string;
2035
- description?: string;
2036
- onClick?: (clickProps: {
2037
- name: string;
2038
- value?: boolean;
1924
+ onExpandChange?: ({ expandedIndex }: {
1925
+ expandedIndex: number;
2039
1926
  }) => void;
2040
1927
  /**
2041
- * value that you get from `onChange` event on SelectInput or in form submissions.
2042
- */
2043
- value: string;
2044
- /**
2045
- * Link to open when item is clicked.
2046
- */
2047
- href?: string;
2048
- /**
2049
- * HTML target of the link
2050
- */
2051
- target?: string;
2052
- /**
2053
- * Item that goes on left-side of item.
2054
- *
2055
- * Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`
2056
- *
2057
- * Will be overriden in multiselect
2058
- */
2059
- leading?: React__default.ReactNode;
2060
- /**
2061
- * Item that goes on right-side of item.
2062
- *
2063
- * Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`
2064
- */
2065
- trailing?: React__default.ReactNode;
2066
- /**
2067
- * Item that goes immediately next to the title.
2068
- *
2069
- * Valid elements - `<ActionListItemBadge />`, `<ActionListItemBadgeGroup />`
2070
- *
2071
- */
2072
- titleSuffix?: React__default.ReactElement;
2073
- isDisabled?: boolean;
2074
- intent?: Extract<FeedbackColors, 'negative'>;
2075
- /**
2076
- * Can be used in combination of `onClick` to highlight item as selected in Button Triggers.
1928
+ * Adds numeric index at the beginning of items
2077
1929
  *
2078
- * When trigger is SelectInput, Use `value` prop on SelectInput instead to make dropdown controlled.
1930
+ * @default false
2079
1931
  */
2080
- isSelected?: boolean;
1932
+ showNumberPrefix?: boolean;
2081
1933
  /**
2082
- * Internally passed from ActionList. No need to pass it explicitly
1934
+ * Visual variant of AccordionItem
2083
1935
  *
2084
- * @private
1936
+ * @default transparent
2085
1937
  */
2086
- _index?: number;
2087
- } & TestID;
2088
- type ActionListSectionProps = {
2089
- title: string;
2090
- children: React__default.ReactNode[] | React__default.ReactNode;
1938
+ variant?: AccordionVariantType;
2091
1939
  /**
2092
- * Internally used to hide the divider on final item in React Native.
2093
- *
2094
- * Should not be used by consumers (also won't work on web)
1940
+ * Size of the Accordion
2095
1941
  *
2096
- * @private
1942
+ * @default large
2097
1943
  */
2098
- _hideDivider?: boolean;
1944
+ size?: 'large' | 'medium';
2099
1945
  /**
2100
- * Internally used to hide / show section in AutoComplete
2101
- *
2102
- * @private
1946
+ * Accepts `AccordionItem` child nodes
2103
1947
  */
2104
- _sectionChildValues?: string[];
2105
- } & TestID;
2106
- declare const ActionListSection: ({ title, children, testID, _hideDivider, _sectionChildValues, }: ActionListSectionProps) => React__default.ReactElement;
2107
- declare const ActionListItemIcon: ({ icon }: {
2108
- icon: IconComponent;
2109
- }) => React__default.ReactElement;
2110
- declare const ActionListItemBadgeGroup: ({ children, }: {
2111
- children: React__default.ReactElement[] | React__default.ReactElement;
2112
- }) => React__default.ReactElement;
2113
- declare const ActionListItemBadge: (props: BadgeProps) => React__default.ReactElement;
2114
- declare const ActionListItemText: ({ children, }: {
2115
- children: StringChildrenType;
2116
- }) => React__default.ReactElement;
2117
- declare const ActionListItem: React__default.MemoExoticComponent<(props: ActionListItemProps) => React__default.ReactElement>;
1948
+ children: React__default.ReactElement | React__default.ReactElement[];
1949
+ } & TestID & StyledPropsBlade;
2118
1950
 
2119
- type ActionListItemAssetProps = {
2120
- /**
2121
- * Source of the image.
2122
- */
2123
- src: string;
2124
- /**
2125
- * Alt tag for the image
2126
- */
2127
- alt: string;
2128
- };
2129
- declare const ActionListItemAsset: (props: ActionListItemAssetProps) => React.ReactElement;
1951
+ /**
1952
+ * # Accordion
1953
+ *
1954
+ * An accordion is used to allow users to toggle between different content sections in a compact vertical stack.
1955
+ *
1956
+ * ## Usage
1957
+ *
1958
+ * ```jsx
1959
+ * <Accordion>
1960
+ * <AccordionItem>
1961
+ * <AccordionItemHeader title="Title" />
1962
+ * <AccordionItemBody>
1963
+ * <Text color="surface.text.gray.subtle">
1964
+ * Hello this is accordion body content
1965
+ * </Text>
1966
+ * </AccordionItemBody>
1967
+ * </AccordionItem>
1968
+ * <AccordionItem>
1969
+ * <AccordionItemHeader title="Title" />
1970
+ * <AccordionItemBody>
1971
+ * <Text color="surface.text.gray.subtle">
1972
+ * Hello this is accordion body content
1973
+ * </Text>
1974
+ * </AccordionItemBody>
1975
+ * </AccordionItem>
1976
+ * </Accordion>
1977
+ * ```
1978
+ *
1979
+ * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs
1980
+ *
1981
+ */
1982
+ declare const Accordion: ({ defaultExpandedIndex, expandedIndex, onExpandChange, showNumberPrefix, children, variant, size, testID, ...styledProps }: AccordionProps) => ReactElement;
2130
1983
 
2131
- type PrimaryAction = {
2132
- text: string;
2133
- onClick: () => void;
2134
- };
2135
- type SecondaryActionButton = {
2136
- text: string;
2137
- onClick: () => void;
2138
- };
2139
- type SecondaryActionLinkButton = {
2140
- text: string;
2141
- href: string;
2142
- onClick?: () => void;
2143
- target?: string;
2144
- /**
2145
- * When `target` is set to `_blank` this is automatically set to `noopener noreferrer`
2146
- */
2147
- rel?: string;
2148
- };
2149
- type SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;
2150
- type AlertProps = {
2151
- /**
2152
- * Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.
2153
- */
2154
- description: ReactChild;
2155
- /**
2156
- * A brief heading
2157
- */
2158
- title?: string;
2159
- /**
2160
- * Shows a dismiss button
2161
- *
2162
- * @default true
2163
- */
2164
- isDismissible?: boolean;
2165
- /**
2166
- * A callback when the dismiss button is clicked
2167
- */
2168
- onDismiss?: () => void;
2169
- /**
2170
- * Can be set to `high` for a more prominent look. Not to be confused with a11y emphasis.
2171
- *
2172
- * @default subtle
2173
- */
2174
- emphasis?: SubtleOrIntense;
2175
- /**
2176
- * Makes the Alert span the entire container width, instead of the default max width of `584px`.
2177
- * This also makes the alert borderless, useful for creating full bleed layouts.
2178
- *
2179
- * @default false
2180
- */
2181
- isFullWidth?: boolean;
2182
- /**
2183
- * Sets the color tone
2184
- */
2185
- color?: FeedbackColors;
2186
- /**
2187
- * Renders a primary action button and a secondary action link button
2188
- */
2189
- actions?: {
2190
- /**
2191
- * Renders a button (should **always** be present if `secondary` action is being used)
2192
- */
2193
- primary?: PrimaryAction;
2194
- /**
2195
- * Renders a Link button
2196
- */
2197
- secondary?: SecondaryAction;
2198
- };
2199
- } & TestID & StyledPropsBlade;
2200
- declare const Alert: ({ description, title, isDismissible, onDismiss, emphasis, isFullWidth, color, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
2201
-
2202
- type AriaRoles = Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'> | 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'meter' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';
2203
- type AccessibilityProps = AriaAttributes;
2204
- type AriaAttributes = {
2205
- role: AriaRoles;
2206
- /**
2207
- * Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
2208
- */
2209
- activeDescendant?: string;
2210
- /**
2211
- * Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
2212
- */
2213
- atomic?: boolean;
2214
- /**
2215
- * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
2216
- */
2217
- autoComplete?: 'none' | 'inline' | 'list' | 'both';
2218
- /**
2219
- * Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
2220
- */
2221
- busy?: boolean;
2222
- /**
2223
- * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
2224
- * @see aria-pressed @see aria-selected.
2225
- */
2226
- checked?: boolean | 'mixed';
2227
- /**
2228
- * Defines the total number of columns in a table, grid, or treegrid.
2229
- * @see aria-colindex.
2230
- */
2231
- colCount?: number;
2232
- /**
2233
- * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
2234
- * @see aria-colcount @see aria-colspan.
2235
- */
2236
- colIndex?: number;
2237
- /**
2238
- * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
2239
- * @see aria-colindex @see aria-rowspan.
2240
- */
2241
- colSpan?: number;
2242
- /**
2243
- * Identifies the element (or elements) whose contents or presence are controlled by the current element.
2244
- * @see aria-owns.
2245
- */
2246
- controls?: string;
2247
- /**
2248
- * Indicates the element that represents the current item within a container or set of related elements.
2249
- */
2250
- current?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
2251
- /**
2252
- * Identifies the element (or elements) that describes the object.
2253
- * @see aria-labelledby
2254
- */
2255
- describedBy?: string;
2256
- /**
2257
- * Identifies the element that provides a detailed, extended description for the object.
2258
- * @see aria-describedby.
2259
- */
2260
- details?: string;
2261
- /**
2262
- * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
2263
- * @see aria-hidden @see aria-readonly.
2264
- */
2265
- disabled?: boolean;
2266
- /**
2267
- * Indicates what functions can be performed when a dragged object is released on the drop target.
2268
- * @deprecated in ARIA 1.1
2269
- */
2270
- dropEffect?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup';
2271
- /**
2272
- * Identifies the element that provides an error message for the object.
2273
- * @see aria-invalid @see aria-describedby.
2274
- */
2275
- errorMessage?: string;
2276
- /**
2277
- * Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
2278
- */
2279
- expanded?: boolean;
2280
- /**
2281
- * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
2282
- * allows assistive technology to override the general default of reading in document source order.
2283
- */
2284
- flowTo?: string;
2285
- /**
2286
- * Indicates an element's "grabbed" state in a drag-and-drop operation.
2287
- * @deprecated in ARIA 1.1
2288
- */
2289
- grabbed?: boolean;
2290
- /**
2291
- * Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
2292
- */
2293
- hasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
2294
- /**
2295
- * Indicates whether the element is exposed to an accessibility API.
2296
- * @see aria-disabled.
2297
- */
2298
- hidden?: boolean;
2299
- /**
2300
- * Indicates the entered value does not conform to the format expected by the application.
2301
- * @see aria-errormessage.
2302
- */
2303
- invalid?: boolean | 'grammar' | 'spelling';
2304
- /**
2305
- * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
2306
- */
2307
- keyShortcuts?: string;
2308
- /**
2309
- * Defines a string value that labels the current element.
2310
- * @see aria-labelledby.
2311
- */
2312
- label?: string;
2313
- /**
2314
- * Identifies the element (or elements) that labels the current element.
2315
- * @see aria-describedby.
2316
- */
2317
- labelledBy?: string;
2318
- /**
2319
- * Defines the hierarchical level of an element within a structure.
2320
- */
2321
- level?: number;
2322
- /**
2323
- * Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
2324
- */
2325
- liveRegion?: 'off' | 'assertive' | 'polite';
2326
- /**
2327
- * Indicates whether an element is modal when displayed.
2328
- */
2329
- modal?: boolean;
2330
- /**
2331
- * Indicates whether a text box accepts multiple lines of input or only a single line.
2332
- */
2333
- multiline?: boolean;
2334
- /**
2335
- * Indicates that the user may select more than one item from the current selectable descendants.
2336
- */
2337
- multiSelectable?: boolean;
2338
- /**
2339
- * Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
2340
- */
2341
- orientation?: 'horizontal' | 'vertical';
2342
- /**
2343
- * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
2344
- * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
2345
- * @see aria-controls.
2346
- */
2347
- owns?: string;
2348
- /**
2349
- * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
2350
- * A hint could be a sample value or a brief description of the expected format.
2351
- */
2352
- placeholder?: string;
2353
- /**
2354
- * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
2355
- * @see aria-setsize.
2356
- */
2357
- posInSet?: number;
2358
- /**
2359
- * Indicates the current "pressed" state of toggle buttons.
2360
- * @see aria-checked @see aria-selected.
2361
- */
2362
- pressed?: boolean | 'mixed';
2363
- /**
2364
- * Indicates that the element is not editable, but is otherwise operable.
2365
- * @see aria-disabled.
2366
- */
2367
- readOnly?: boolean;
2368
- /**
2369
- * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
2370
- * @see aria-atomic.
2371
- */
2372
- relevant?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals';
2373
- /**
2374
- * Indicates that user input is required on the element before a form may be submitted.
2375
- */
2376
- required?: boolean;
2377
- /**
2378
- * Defines a human-readable, author-localized description for the role of an element.
2379
- */
2380
- roleDescription?: string;
2381
- /**
2382
- * Defines the total number of rows in a table, grid, or treegrid.
2383
- * @see aria-rowindex.
2384
- */
2385
- rowCount?: number;
2386
- /**
2387
- * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
2388
- * @see aria-rowcount @see aria-rowspan.
2389
- */
2390
- rowIndex?: number;
2391
- /**
2392
- * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
2393
- * @see aria-rowindex @see aria-colspan.
2394
- */
2395
- rowSpan?: number;
2396
- /**
2397
- * Indicates the current "selected" state of various widgets.
2398
- * @see aria-checked @see aria-pressed.
2399
- */
2400
- selected?: boolean;
2401
- /**
2402
- * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
2403
- * @see aria-posinset.
2404
- */
2405
- setSize?: number;
2406
- /**
2407
- * Indicates if items in a table or grid are sorted in ascending or descending order.
2408
- */
2409
- sort?: 'none' | 'ascending' | 'descending' | 'other';
2410
- /**
2411
- * Defines the maximum allowed value for a range widget.
2412
- */
2413
- valueMax?: number;
2414
- /**
2415
- * Defines the minimum allowed value for a range widget.
2416
- */
2417
- valueMin?: number;
2418
- /**
2419
- * Defines the current value for a range widget.
2420
- * @see aria-valuetext.
2421
- */
2422
- valueNow?: number;
2423
- /**
2424
- * Defines the human readable text alternative of aria-valuenow for a range widget.
2425
- */
2426
- valueText?: string;
2427
- };
2428
-
2429
- type InteractiveText = DotNotationToken<Theme['colors']['interactive']['text']>;
2430
- type SurfaceText = DotNotationToken<Theme['colors']['surface']['text']>;
2431
- type FeedbackText = DotNotationToken<Theme['colors']['feedback']['text']>;
2432
- type TextColors = `interactive.text.${InteractiveText}` | `surface.text.${SurfaceText}` | `feedback.text.${FeedbackText}`;
2433
- type As = 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'abbr' | 'q' | 'cite' | 'figcaption' | 'div' | 'label';
2434
- type BaseTextProps = {
2435
- id?: string;
2436
- color?: TextColors;
2437
- fontFamily?: keyof Theme['typography']['fonts']['family'];
2438
- fontSize?: keyof Theme['typography']['fonts']['size'];
2439
- fontWeight?: keyof Theme['typography']['fonts']['weight'];
2440
- fontStyle?: 'italic' | 'normal';
2441
- textDecorationLine?: 'line-through' | 'none' | 'underline';
2442
- lineHeight?: keyof Theme['typography']['lineHeights'];
2443
- letterSpacing?: keyof Theme['typography']['letterSpacings'];
2444
- wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
2445
- opacity?: number;
2446
- /**
2447
- * Web only
2448
- */
2449
- as?: As;
2450
- textAlign?: 'center' | 'justify' | 'left' | 'right';
2451
- truncateAfterLines?: number;
2452
- className?: string;
2453
- style?: React.CSSProperties;
2454
- children: React.ReactNode;
2455
- accessibilityProps?: Partial<AccessibilityProps>;
2456
- /**
2457
- * React Native only
2458
- */
2459
- numberOfLines?: number;
2460
- componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code' | 'display';
2461
- } & TestID & StyledPropsBlade;
2462
- type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
2463
-
2464
- type AmountSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
2465
- type AmountDisplayProps = {
2466
- type?: 'display';
2467
- size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge'>;
2468
- weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
2469
- };
2470
- type AmountHeadingProps = {
2471
- type?: 'heading';
2472
- size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
2473
- weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;
2474
- };
2475
- type AmountBodyProps = {
2476
- type?: 'body';
2477
- size?: Extract<AmountSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
2478
- weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
2479
- };
2480
- type AmountTypeProps = AmountDisplayProps | AmountHeadingProps | AmountBodyProps;
2481
-
2482
- type AmountCommonProps = {
2483
- /**
2484
- * The value to be rendered within the component.
2485
- *
2486
- */
2487
- value: number;
2488
- /**
2489
- * Sets the color of the amount.
2490
- *
2491
- * @default undefined
2492
- */
2493
- color?: BaseTextProps['color'];
2494
- /**
2495
- * Indicates what the suffix of amount should be
2496
- *
2497
- * @default 'decimals'
2498
- */
2499
- suffix?: 'decimals' | 'none' | 'humanize';
2500
- /**
2501
- * Makes the currency indicator(currency symbol/code) and decimal digits small and faded
2502
- *
2503
- * @default true
2504
- */
2505
- isAffixSubtle?: true | false;
2506
- /**
2507
- * Determines the visual representation of the currency, choose between displaying the currency symbol or code.
2508
- *
2509
- * Note: Currency symbol and code is determined by the locale set in user's browser or set via @razorpay/i18nify-react library.
2510
- *
2511
- * @default 'currency-symbol'
2512
- */
2513
- currencyIndicator?: 'currency-symbol' | 'currency-code';
2514
- /**
2515
- * The currency of the amount. Note that this component
2516
- * only displays the provided value in the specified currency, it does not perform any currency conversion.
2517
- *
2518
- * @default 'INR'
2519
- * */
2520
- currency?: CurrencyCodeType;
2521
- /**
2522
- * If true, the amount text will have a line through it.
2523
- *
2524
- * @default false
2525
- */
2526
- isStrikethrough?: boolean;
2527
- } & TestID & StyledPropsBlade;
2528
- type AmountProps = AmountTypeProps & AmountCommonProps;
2529
- declare const Amount: ({ value, suffix, type, size, weight, isAffixSubtle, isStrikethrough, color, currencyIndicator, currency, testID, ...styledProps }: AmountProps) => ReactElement;
2530
-
2531
- type SnapPoints = [number, number, number];
2532
-
2533
- type BaseHeaderProps = {
2534
- title?: string;
2535
- subtitle?: string;
2536
- /**
2537
- * Leading part of the header placed at the left most side of the header
2538
- */
2539
- leading?: React__default.ReactNode;
2540
- /**
2541
- * Trailing part of the header placed at the right most side of the header
2542
- */
2543
- trailing?: React__default.ReactNode;
2544
- /**
2545
- * Placed adjacent to the title text
2546
- */
2547
- titleSuffix?: React__default.ReactNode;
2548
- /**
2549
- * @default true
2550
- */
2551
- showDivider?: boolean;
2552
- /**
2553
- * @default false
2554
- */
2555
- showBackButton?: boolean;
2556
- /**
2557
- * @default true
2558
- */
2559
- showCloseButton?: boolean;
2560
- onCloseButtonClick?: () => void;
2561
- onBackButtonClick?: () => void;
2562
- closeButtonRef?: React__default.MutableRefObject<any>;
2563
- backButtonRef?: React__default.MutableRefObject<any>;
2564
- metaComponentName?: string;
2565
- /**
2566
- * inner child of BottomSheetHeader. Meant to be used for AutoComplete only
2567
- */
2568
- children?: React__default.ReactElement;
2569
- } & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'> & TestID;
2570
-
2571
- type BaseFooterProps = {
2572
- children: React__default.ReactNode;
2573
- metaComponentName?: string;
2574
- showDivider?: boolean;
2575
- } & TestID;
2576
-
2577
- type BottomSheetProps = {
2578
- /**
2579
- * Accepts BottomSheetHeader, BottomSheetFooter, BottomSheetBody
2580
- */
2581
- children: React.ReactNode;
2582
- /**
2583
- * SnapPoints in which the bottom sheeet will rest on.
2584
- * Accepts numbers between 0 & 1 which maps to the total view height of the screen, 0.5 means 50% of screen height.
2585
- *
2586
- * @default [0.35, 0.5, 0.85]
2587
- */
2588
- snapPoints?: SnapPoints;
2589
- /**
2590
- * Called when the bottom sheet is closed, either by user state, hitting `esc` or tapping backdrop
2591
- */
2592
- onDismiss?: () => void;
2593
- /**
2594
- * Toggles bottom sheet state
2595
- *
2596
- * @default false
2597
- */
2598
- isOpen?: boolean;
2599
- /**
2600
- * Ref element you want to get keyboard focus when opening the sheet
2601
- * By default the initial focus will go to the close button
2602
- */
2603
- initialFocusRef?: React.MutableRefObject<any>;
2604
- /**
2605
- * Sets the z-index of the bottom sheet
2606
- * Note: when using stacked bottom sheet make sure all the bottom sheets have the same zIndex
2607
- * @default 100
2608
- */
2609
- zIndex?: number;
2610
- };
2611
- type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick' | 'children'> & {
2612
- /**
2613
- * Trailing element to be rendered in the Header
2614
- *
2615
- * Accepts one of `Badge`, `Text`, `Button`, `Link`
2616
- */
2617
- trailing?: BaseHeaderProps['trailing'];
2618
- /**
2619
- * Renders an adornment besides the title
2620
- *
2621
- * Accepts `Counter`
2622
- */
2623
- titleSuffix?: BaseHeaderProps['titleSuffix'];
2624
- };
2625
- type BottomSheetFooterProps = Pick<BaseFooterProps, 'children'>;
2626
- type BottomSheetBodyProps = {
2627
- children: React.ReactNode;
2628
- /**
2629
- * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately
2630
- * @default `spacing.5`
2631
- *
2632
- * **Links:**
2633
- * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
2634
- */
2635
- padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.5'>;
2636
- };
2637
-
2638
- declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trailing, showBackButton, onBackButtonClick, children, }: BottomSheetHeaderProps) => React__default.ReactElement;
2639
-
2640
- declare const BottomSheetFooter: ({ children }: BaseFooterProps) => React__default.ReactElement;
2641
-
2642
- declare const BottomSheetBody: ({ children, padding, }: BottomSheetBodyProps) => React__default.ReactElement;
2643
-
2644
- declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, zIndex, }: BottomSheetProps) => React__default.ReactElement;
2645
-
2646
- type BaseLinkCommonProps = {
2647
- color?: 'primary' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
2648
- icon?: IconComponent;
2649
- iconPosition?: 'left' | 'right';
2650
- onClick?: (event: SyntheticEvent) => void;
2651
- onBlur?: Platform.Select<{
2652
- native: (event: GestureResponderEvent) => void;
2653
- web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
2654
- }>;
2655
- onMouseLeave?: Platform.Select<{
2656
- native: (event: GestureResponderEvent) => void;
2657
- web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
2658
- }>;
2659
- onKeyDown?: Platform.Select<{
2660
- native: (event: GestureResponderEvent) => void;
2661
- web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
2662
- }>;
2663
- accessibilityProps?: Partial<AccessibilityProps>;
2664
- /**
2665
- * Sets the size of the link
2666
- *
2667
- * @default medium
2668
- */
2669
- size?: Extract<BaseTextSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
2670
- /**
2671
- * Defines how far your touch can start away from the link. This is a react-native only prop and has no effect on web.
2672
- */
2673
- hitSlop?: {
2674
- top?: number;
2675
- right?: number;
2676
- bottom?: number;
2677
- left?: number;
2678
- } | number;
2679
- /**
2680
- * The title of the link which is displayed as a tooltip. This is a web only prop and has no effect on react-native.
2681
- */
2682
- htmlTitle?: string;
2683
- opacity?: number;
2684
- } & TestID & StyledPropsBlade & Omit<BladeCommonEvents, 'onBlur' | 'onMouseLeave'>;
2685
- type BaseLinkWithoutIconProps = BaseLinkCommonProps & {
2686
- icon?: undefined;
2687
- children: StringChildrenType;
2688
- };
2689
- type BaseLinkWithIconProps = BaseLinkCommonProps & {
2690
- icon: IconComponent;
2691
- children?: StringChildrenType;
2692
- };
2693
- type BaseLinkPropsWithOrWithoutIcon = BaseLinkWithIconProps | BaseLinkWithoutIconProps;
2694
- type BaseLinkAnchorVariantProps = BaseLinkPropsWithOrWithoutIcon & {
2695
- variant?: 'anchor';
2696
- href?: string;
2697
- target?: string;
2698
- rel?: string;
2699
- isDisabled?: undefined;
2700
- };
2701
- type BaseLinkButtonVariantProps = BaseLinkPropsWithOrWithoutIcon & {
2702
- variant?: 'button';
2703
- isDisabled?: boolean;
2704
- href?: undefined;
2705
- target?: undefined;
2706
- rel?: undefined;
2707
- };
2708
- type BaseLinkProps = BaseLinkAnchorVariantProps | BaseLinkButtonVariantProps;
2709
-
2710
- type LinkCommonProps = {
2711
- variant?: 'anchor' | 'button';
2712
- icon?: IconComponent;
2713
- color?: 'primary' | 'white' | 'neutral';
2714
- iconPosition?: 'left' | 'right';
2715
- isDisabled?: boolean;
2716
- onClick?: (event: SyntheticEvent) => void;
2717
- href?: string;
2718
- target?: string;
2719
- accessibilityLabel?: string;
2720
- /**
2721
- * It is exposed for internal usage with tooltip.
2722
- *
2723
- * @private
2724
- */
2725
- 'aria-describedby'?: string;
2726
- /**
2727
- * Sets the size of the link
2728
- *
2729
- * @default medium
2730
- */
2731
- size?: BaseLinkProps['size'];
2732
- } & TestID & StyledPropsBlade & BladeCommonEvents & Platform.Select<{
2733
- native: {
2734
- /**
2735
- * Defines how far your touch can start away from the link
2736
- */
2737
- hitSlop?: {
2738
- top?: number;
2739
- right?: number;
2740
- bottom?: number;
2741
- left?: number;
2742
- } | number;
2743
- /**
2744
- * This is a web only prop and has no effect on react-native.
2745
- */
2746
- htmlTitle?: undefined;
2747
- };
2748
- web: {
2749
- /**
2750
- * This is a react-native only prop and has no effect on web.
2751
- */
2752
- hitSlop?: undefined;
2753
- /**
2754
- * The title of the link which is displayed as a tooltip.
2755
- */
2756
- htmlTitle?: string;
2757
- };
2758
- }>;
2759
- type LinkWithoutIconProps = LinkCommonProps & {
2760
- icon?: undefined;
2761
- children: StringChildrenType;
2762
- };
2763
- type LinkWithIconProps = LinkCommonProps & {
2764
- icon: IconComponent;
2765
- children?: StringChildrenType;
2766
- };
2767
- type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
2768
- type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
2769
- variant?: 'anchor';
2770
- href?: string;
2771
- target?: string;
2772
- rel?: string;
2773
- isDisabled?: undefined;
2774
- };
2775
- type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
2776
- variant?: 'button';
2777
- isDisabled?: boolean;
2778
- href?: undefined;
2779
- target?: undefined;
2780
- rel?: undefined;
2781
- };
2782
- type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
2783
- declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<BladeElementRef>>;
2784
-
2785
- type BreadcrumbProps = StyledPropsBlade & {
2786
- /**
2787
- * Size of the Breadcrumb
2788
- *
2789
- * @default medium
2790
- */
2791
- size?: 'small' | 'medium' | 'large';
2792
- /**
2793
- * Color of the Breadcrumb
2794
- *
2795
- * @default neutral
2796
- */
2797
- color?: 'neutral' | 'primary' | 'white';
2798
- /**
2799
- * Content of the Breadcrumb, accepts BreadcrumbItem
2800
- */
2801
- children: React.ReactNode;
2802
- /**
2803
- * Whether to show the last separator
2804
- */
2805
- showLastSeparator?: boolean;
2806
- /**
2807
- * aria-label for breadcrumb
2808
- */
2809
- accessibilityLabel?: string;
2810
- };
2811
- type BreadcrumbItemProps = {
2812
- /**
2813
- * Href of the BreadcrumbItem
2814
- */
2815
- href: string;
2816
- /**
2817
- * Function to be called on click of the BreadcrumbItem,
2818
- *
2819
- * This can be used to integrate with routing libraries like `react-router-dom`
2820
- */
2821
- onClick?: LinkProps['onClick'];
2822
- /**
2823
- * Whether the BreadcrumbItem is the current page,
2824
- * Sets the aria-current attribute to `page`
2825
- *
2826
- * @default false
2827
- */
2828
- isCurrentPage?: boolean;
2829
- /**
2830
- * Content of the BreadcrumbItem
2831
- */
2832
- children?: StringChildrenType;
2833
- /**
2834
- * Icon to be shown before the BreadcrumbItem
2835
- */
2836
- icon?: IconComponent;
2837
- /**
2838
- * Accessibility label for the BreadcrumbItem, can be used in icon only variant
2839
- */
2840
- accessibilityLabel?: string;
2841
- };
2842
-
2843
- declare const Breadcrumb: ({ size, color, showLastSeparator, accessibilityLabel, children, ...styledProps }: BreadcrumbProps) => React__default.ReactElement;
2844
-
2845
- declare const BreadcrumbItem: ({ children, href, icon: Icon, isCurrentPage, onClick, accessibilityLabel, }: BreadcrumbItemProps) => React__default.ReactElement;
2846
-
2847
- declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps & MarginProps & {
2848
- width: SpacingValueType | {
2849
- readonly base?: SpacingValueType | undefined;
2850
- readonly xs?: SpacingValueType | undefined;
2851
- readonly s?: SpacingValueType | undefined;
2852
- readonly m?: SpacingValueType | undefined;
2853
- readonly l?: SpacingValueType | undefined;
2854
- readonly xl?: SpacingValueType | undefined;
1984
+ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps & MarginProps & {
1985
+ width: SpacingValueType | {
1986
+ readonly base?: SpacingValueType | undefined;
1987
+ readonly xs?: SpacingValueType | undefined;
1988
+ readonly s?: SpacingValueType | undefined;
1989
+ readonly m?: SpacingValueType | undefined;
1990
+ readonly l?: SpacingValueType | undefined;
1991
+ readonly xl?: SpacingValueType | undefined;
2855
1992
  };
2856
1993
  display?: csstype.Property.Display | {
2857
1994
  readonly base?: csstype.Property.Display | undefined;
@@ -3341,47 +2478,998 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
3341
2478
  readonly l?: csstype.Property.BackgroundPosition<string | number> | undefined;
3342
2479
  readonly xl?: csstype.Property.BackgroundPosition<string | number> | undefined;
3343
2480
  } | undefined;
3344
- borderColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
3345
- readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
3346
- readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
3347
- readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
3348
- readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
3349
- readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
3350
- readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
2481
+ borderColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
2482
+ readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
2483
+ readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
2484
+ readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
2485
+ readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
2486
+ readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
2487
+ readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
2488
+ };
2489
+ borderRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
2490
+ readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
2491
+ readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
2492
+ readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
2493
+ readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
2494
+ readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
2495
+ readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
2496
+ };
2497
+ borderWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
2498
+ readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
2499
+ readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
2500
+ readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
2501
+ readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
2502
+ readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
2503
+ readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
2504
+ };
2505
+ __brand__?: "platform-web" | {
2506
+ readonly base?: "platform-web" | undefined;
2507
+ readonly xs?: "platform-web" | undefined;
2508
+ readonly s?: "platform-web" | undefined;
2509
+ readonly m?: "platform-web" | undefined;
2510
+ readonly l?: "platform-web" | undefined;
2511
+ readonly xl?: "platform-web" | undefined;
2512
+ } | undefined;
2513
+ } & MakeObjectResponsive<{
2514
+ 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";
2515
+ }, "backgroundColor"> & {
2516
+ as: "aside" | "div" | "footer" | "header" | "label" | "main" | "nav" | "section" | "span";
2517
+ } & {
2518
+ children?: React__default.ReactNode | React__default.ReactNode[];
2519
+ tabIndex?: number | undefined;
2520
+ id?: string | undefined;
2521
+ } & TestID> & React__default.RefAttributes<BoxRefType>>;
2522
+
2523
+ type BaseHeaderProps = {
2524
+ title?: string;
2525
+ subtitle?: string;
2526
+ /**
2527
+ * Leading part of the header placed at the left most side of the header
2528
+ */
2529
+ leading?: React__default.ReactNode;
2530
+ /**
2531
+ * Trailing part of the header placed at the right most side of the header
2532
+ */
2533
+ trailing?: React__default.ReactNode;
2534
+ /**
2535
+ * Placed adjacent to the title text
2536
+ */
2537
+ titleSuffix?: React__default.ReactNode;
2538
+ /**
2539
+ * @default true
2540
+ */
2541
+ showDivider?: boolean;
2542
+ /**
2543
+ * @default false
2544
+ */
2545
+ showBackButton?: boolean;
2546
+ /**
2547
+ * Slot for rendering any trailing interaction element into BaseHeader.
2548
+ *
2549
+ * E.g. Used in accordion to render CollapsibleChevronIcon
2550
+ */
2551
+ trailingInteractionElement?: React__default.ReactNode;
2552
+ /**
2553
+ * Decides size of the Header
2554
+ */
2555
+ size?: 'large' | 'medium';
2556
+ /**
2557
+ * @default true
2558
+ */
2559
+ showCloseButton?: boolean;
2560
+ /**
2561
+ * Disabled state of BaseHeader
2562
+ *
2563
+ * @default false
2564
+ */
2565
+ isDisabled?: boolean;
2566
+ paddingX?: BoxProps['paddingX'];
2567
+ marginY?: BoxProps['marginY'];
2568
+ onCloseButtonClick?: () => void;
2569
+ onBackButtonClick?: () => void;
2570
+ closeButtonRef?: React__default.MutableRefObject<any>;
2571
+ backButtonRef?: React__default.MutableRefObject<any>;
2572
+ metaComponentName?: string;
2573
+ /**
2574
+ * inner child of BottomSheetHeader. Meant to be used for AutoComplete only
2575
+ */
2576
+ children?: React__default.ReactElement | React__default.ReactElement[];
2577
+ } & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'> & TestID;
2578
+
2579
+ declare const AccordionItemHeader: ({ title, subtitle, leading, children, trailing, titleSuffix, }: Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'children' | 'trailing' | 'titleSuffix'>) => React.ReactElement;
2580
+
2581
+ declare const AccordionItemBody: ({ children, _description, }: {
2582
+ children?: React.ReactNode | StringChildrenType;
2583
+ _description?: string | undefined;
2584
+ }) => React.ReactElement;
2585
+
2586
+ type AccordionItemProps = {
2587
+ /**
2588
+ * Title text content
2589
+ *
2590
+ * @deprecated Use AccordionItemHeader and AccordionItemBody
2591
+ *
2592
+ * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API
2593
+ */
2594
+ title?: string;
2595
+ /**
2596
+ * Body text content
2597
+ *
2598
+ * @deprecated Use AccordionItemHeader and AccordionItemBody
2599
+ *
2600
+ * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API
2601
+ */
2602
+ description?: string;
2603
+ /**
2604
+ * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)
2605
+ *
2606
+ * @deprecated Use `leading={<StarIcon size="large" />}` on AccordionItemHeader instead
2607
+ *
2608
+ * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API
2609
+ */
2610
+ icon?: IconComponent;
2611
+ /**
2612
+ * Slot, renders any custom content
2613
+ */
2614
+ children?: ReactNode | ReactNode[];
2615
+ /**
2616
+ * Disabled state of the item
2617
+ *
2618
+ * @default false
2619
+ */
2620
+ isDisabled?: boolean;
2621
+ /**
2622
+ * **Internal:** used for determining numbering, you don't need to pass this,
2623
+ * instead pass `showNumberPrefix` to root `Accordion`
2624
+ */
2625
+ _index?: number;
2626
+ } & TestID;
2627
+ declare const AccordionItem: ({ title, description, icon, children, isDisabled, _index, testID, }: AccordionItemProps) => ReactElement;
2628
+
2629
+ type ActionListProps = {
2630
+ children: React__default.ReactNode[];
2631
+ } & TestID;
2632
+ /**
2633
+ * ### ActionList
2634
+ *
2635
+ * List of multiple actionable items. Can be used as menu items inside `Dropdown`,
2636
+ * `BottomSheet` and as selectable items when combined with `SelectInput`
2637
+ *
2638
+ * #### Usage
2639
+ *
2640
+ * ```jsx
2641
+ * <Dropdown>
2642
+ * <SelectInput label="Select Action" />
2643
+ * <DropdownOverlay>
2644
+ * <DropdownHeader title="Header Title" />
2645
+ * <ActionList>
2646
+ * <ActionListItem
2647
+ * title="Home"
2648
+ * value="home"
2649
+ * leading={<ActionListItemIcon icon={HomeIcon} />}
2650
+ * />
2651
+ * <ActionListItem
2652
+ * title="Pricing"
2653
+ * value="pricing"
2654
+ * leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
2655
+ * />
2656
+ * </ActionList>
2657
+ * <DropdownFooter><Button>Apply</Button></DropdownFooter>
2658
+ * </DropdownOverlay>
2659
+ * </Dropdown>
2660
+ * ```
2661
+ *
2662
+ */
2663
+ declare const ActionList: React__default.MemoExoticComponent<({ children, testID }: ActionListProps) => React__default.ReactElement>;
2664
+
2665
+ type BadgeProps = {
2666
+ /**
2667
+ * Sets the label for the badge.
2668
+ *
2669
+ */
2670
+ children: StringChildrenType;
2671
+ /**
2672
+ * Sets the color of the badge.
2673
+ *
2674
+ * @default 'neutral'
2675
+ */
2676
+ color?: FeedbackColors | 'primary';
2677
+ /**
2678
+ * Sets the contrast of the badge.
2679
+ *
2680
+ * @default 'subtle'
2681
+ */
2682
+ emphasis?: SubtleOrIntense;
2683
+ /**
2684
+ * Sets the size of the badge.
2685
+ *
2686
+ * @default 'medium'
2687
+ */
2688
+ size?: 'small' | 'medium' | 'large';
2689
+ /**
2690
+ * Icon to be displayed in the badge.
2691
+ * Accepts a component of type `IconComponent` from Blade.
2692
+ *
2693
+ */
2694
+ icon?: IconComponent;
2695
+ } & TestID & StyledPropsBlade;
2696
+ declare const Badge: ({ children, emphasis, icon: Icon, size, color, testID, ...styledProps }: BadgeProps) => ReactElement;
2697
+
2698
+ type ActionListItemProps = {
2699
+ title: string;
2700
+ description?: string;
2701
+ onClick?: (clickProps: {
2702
+ name: string;
2703
+ value?: boolean;
2704
+ }) => void;
2705
+ /**
2706
+ * value that you get from `onChange` event on SelectInput or in form submissions.
2707
+ */
2708
+ value: string;
2709
+ /**
2710
+ * Link to open when item is clicked.
2711
+ */
2712
+ href?: string;
2713
+ /**
2714
+ * HTML target of the link
2715
+ */
2716
+ target?: string;
2717
+ /**
2718
+ * Item that goes on left-side of item.
2719
+ *
2720
+ * Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`
2721
+ *
2722
+ * Will be overriden in multiselect
2723
+ */
2724
+ leading?: React__default.ReactNode;
2725
+ /**
2726
+ * Item that goes on right-side of item.
2727
+ *
2728
+ * Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`
2729
+ */
2730
+ trailing?: React__default.ReactNode;
2731
+ /**
2732
+ * Item that goes immediately next to the title.
2733
+ *
2734
+ * Valid elements - `<ActionListItemBadge />`, `<ActionListItemBadgeGroup />`
2735
+ *
2736
+ */
2737
+ titleSuffix?: React__default.ReactElement;
2738
+ isDisabled?: boolean;
2739
+ intent?: Extract<FeedbackColors, 'negative'>;
2740
+ /**
2741
+ * Can be used in combination of `onClick` to highlight item as selected in Button Triggers.
2742
+ *
2743
+ * When trigger is SelectInput, Use `value` prop on SelectInput instead to make dropdown controlled.
2744
+ */
2745
+ isSelected?: boolean;
2746
+ /**
2747
+ * Internally passed from ActionList. No need to pass it explicitly
2748
+ *
2749
+ * @private
2750
+ */
2751
+ _index?: number;
2752
+ } & TestID;
2753
+ type ActionListSectionProps = {
2754
+ title: string;
2755
+ children: React__default.ReactNode[] | React__default.ReactNode;
2756
+ /**
2757
+ * Internally used to hide the divider on final item in React Native.
2758
+ *
2759
+ * Should not be used by consumers (also won't work on web)
2760
+ *
2761
+ * @private
2762
+ */
2763
+ _hideDivider?: boolean;
2764
+ /**
2765
+ * Internally used to hide / show section in AutoComplete
2766
+ *
2767
+ * @private
2768
+ */
2769
+ _sectionChildValues?: string[];
2770
+ } & TestID;
2771
+ declare const ActionListSection: ({ title, children, testID, _hideDivider, _sectionChildValues, }: ActionListSectionProps) => React__default.ReactElement;
2772
+ declare const ActionListItemIcon: ({ icon }: {
2773
+ icon: IconComponent;
2774
+ }) => React__default.ReactElement;
2775
+ declare const ActionListItemBadgeGroup: ({ children, }: {
2776
+ children: React__default.ReactElement[] | React__default.ReactElement;
2777
+ }) => React__default.ReactElement;
2778
+ declare const ActionListItemBadge: (props: BadgeProps) => React__default.ReactElement;
2779
+ declare const ActionListItemText: ({ children, }: {
2780
+ children: StringChildrenType;
2781
+ }) => React__default.ReactElement;
2782
+ declare const ActionListItem: React__default.MemoExoticComponent<(props: ActionListItemProps) => React__default.ReactElement>;
2783
+
2784
+ type ActionListItemAssetProps = {
2785
+ /**
2786
+ * Source of the image.
2787
+ */
2788
+ src: string;
2789
+ /**
2790
+ * Alt tag for the image
2791
+ */
2792
+ alt: string;
2793
+ };
2794
+ declare const ActionListItemAsset: (props: ActionListItemAssetProps) => React.ReactElement;
2795
+
2796
+ type PrimaryAction = {
2797
+ text: string;
2798
+ onClick: () => void;
2799
+ };
2800
+ type SecondaryActionButton = {
2801
+ text: string;
2802
+ onClick: () => void;
2803
+ };
2804
+ type SecondaryActionLinkButton = {
2805
+ text: string;
2806
+ href: string;
2807
+ onClick?: () => void;
2808
+ target?: string;
2809
+ /**
2810
+ * When `target` is set to `_blank` this is automatically set to `noopener noreferrer`
2811
+ */
2812
+ rel?: string;
2813
+ };
2814
+ type SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;
2815
+ type AlertProps = {
2816
+ /**
2817
+ * Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.
2818
+ */
2819
+ description: ReactChild;
2820
+ /**
2821
+ * A brief heading
2822
+ */
2823
+ title?: string;
2824
+ /**
2825
+ * Shows a dismiss button
2826
+ *
2827
+ * @default true
2828
+ */
2829
+ isDismissible?: boolean;
2830
+ /**
2831
+ * A callback when the dismiss button is clicked
2832
+ */
2833
+ onDismiss?: () => void;
2834
+ /**
2835
+ * Can be set to `high` for a more prominent look. Not to be confused with a11y emphasis.
2836
+ *
2837
+ * @default subtle
2838
+ */
2839
+ emphasis?: SubtleOrIntense;
2840
+ /**
2841
+ * Makes the Alert span the entire container width, instead of the default max width of `584px`.
2842
+ * This also makes the alert borderless, useful for creating full bleed layouts.
2843
+ *
2844
+ * @default false
2845
+ */
2846
+ isFullWidth?: boolean;
2847
+ /**
2848
+ * Sets the color tone
2849
+ */
2850
+ color?: FeedbackColors;
2851
+ /**
2852
+ * Renders a primary action button and a secondary action link button
2853
+ */
2854
+ actions?: {
2855
+ /**
2856
+ * Renders a button (should **always** be present if `secondary` action is being used)
2857
+ */
2858
+ primary?: PrimaryAction;
2859
+ /**
2860
+ * Renders a Link button
2861
+ */
2862
+ secondary?: SecondaryAction;
3351
2863
  };
3352
- borderRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
3353
- readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
3354
- readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
3355
- readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
3356
- readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
3357
- readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
3358
- readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
2864
+ } & TestID & StyledPropsBlade;
2865
+ declare const Alert: ({ description, title, isDismissible, onDismiss, emphasis, isFullWidth, color, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
2866
+
2867
+ type AriaRoles = Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'> | 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'meter' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';
2868
+ type AccessibilityProps = AriaAttributes;
2869
+ type AriaAttributes = {
2870
+ role: AriaRoles;
2871
+ /**
2872
+ * Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
2873
+ */
2874
+ activeDescendant?: string;
2875
+ /**
2876
+ * Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
2877
+ */
2878
+ atomic?: boolean;
2879
+ /**
2880
+ * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
2881
+ */
2882
+ autoComplete?: 'none' | 'inline' | 'list' | 'both';
2883
+ /**
2884
+ * Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
2885
+ */
2886
+ busy?: boolean;
2887
+ /**
2888
+ * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
2889
+ * @see aria-pressed @see aria-selected.
2890
+ */
2891
+ checked?: boolean | 'mixed';
2892
+ /**
2893
+ * Defines the total number of columns in a table, grid, or treegrid.
2894
+ * @see aria-colindex.
2895
+ */
2896
+ colCount?: number;
2897
+ /**
2898
+ * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
2899
+ * @see aria-colcount @see aria-colspan.
2900
+ */
2901
+ colIndex?: number;
2902
+ /**
2903
+ * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
2904
+ * @see aria-colindex @see aria-rowspan.
2905
+ */
2906
+ colSpan?: number;
2907
+ /**
2908
+ * Identifies the element (or elements) whose contents or presence are controlled by the current element.
2909
+ * @see aria-owns.
2910
+ */
2911
+ controls?: string;
2912
+ /**
2913
+ * Indicates the element that represents the current item within a container or set of related elements.
2914
+ */
2915
+ current?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
2916
+ /**
2917
+ * Identifies the element (or elements) that describes the object.
2918
+ * @see aria-labelledby
2919
+ */
2920
+ describedBy?: string;
2921
+ /**
2922
+ * Identifies the element that provides a detailed, extended description for the object.
2923
+ * @see aria-describedby.
2924
+ */
2925
+ details?: string;
2926
+ /**
2927
+ * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
2928
+ * @see aria-hidden @see aria-readonly.
2929
+ */
2930
+ disabled?: boolean;
2931
+ /**
2932
+ * Indicates what functions can be performed when a dragged object is released on the drop target.
2933
+ * @deprecated in ARIA 1.1
2934
+ */
2935
+ dropEffect?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup';
2936
+ /**
2937
+ * Identifies the element that provides an error message for the object.
2938
+ * @see aria-invalid @see aria-describedby.
2939
+ */
2940
+ errorMessage?: string;
2941
+ /**
2942
+ * Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
2943
+ */
2944
+ expanded?: boolean;
2945
+ /**
2946
+ * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
2947
+ * allows assistive technology to override the general default of reading in document source order.
2948
+ */
2949
+ flowTo?: string;
2950
+ /**
2951
+ * Indicates an element's "grabbed" state in a drag-and-drop operation.
2952
+ * @deprecated in ARIA 1.1
2953
+ */
2954
+ grabbed?: boolean;
2955
+ /**
2956
+ * Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
2957
+ */
2958
+ hasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
2959
+ /**
2960
+ * Indicates whether the element is exposed to an accessibility API.
2961
+ * @see aria-disabled.
2962
+ */
2963
+ hidden?: boolean;
2964
+ /**
2965
+ * Indicates the entered value does not conform to the format expected by the application.
2966
+ * @see aria-errormessage.
2967
+ */
2968
+ invalid?: boolean | 'grammar' | 'spelling';
2969
+ /**
2970
+ * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
2971
+ */
2972
+ keyShortcuts?: string;
2973
+ /**
2974
+ * Defines a string value that labels the current element.
2975
+ * @see aria-labelledby.
2976
+ */
2977
+ label?: string;
2978
+ /**
2979
+ * Identifies the element (or elements) that labels the current element.
2980
+ * @see aria-describedby.
2981
+ */
2982
+ labelledBy?: string;
2983
+ /**
2984
+ * Defines the hierarchical level of an element within a structure.
2985
+ */
2986
+ level?: number;
2987
+ /**
2988
+ * Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
2989
+ */
2990
+ liveRegion?: 'off' | 'assertive' | 'polite';
2991
+ /**
2992
+ * Indicates whether an element is modal when displayed.
2993
+ */
2994
+ modal?: boolean;
2995
+ /**
2996
+ * Indicates whether a text box accepts multiple lines of input or only a single line.
2997
+ */
2998
+ multiline?: boolean;
2999
+ /**
3000
+ * Indicates that the user may select more than one item from the current selectable descendants.
3001
+ */
3002
+ multiSelectable?: boolean;
3003
+ /**
3004
+ * Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
3005
+ */
3006
+ orientation?: 'horizontal' | 'vertical';
3007
+ /**
3008
+ * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
3009
+ * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
3010
+ * @see aria-controls.
3011
+ */
3012
+ owns?: string;
3013
+ /**
3014
+ * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
3015
+ * A hint could be a sample value or a brief description of the expected format.
3016
+ */
3017
+ placeholder?: string;
3018
+ /**
3019
+ * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
3020
+ * @see aria-setsize.
3021
+ */
3022
+ posInSet?: number;
3023
+ /**
3024
+ * Indicates the current "pressed" state of toggle buttons.
3025
+ * @see aria-checked @see aria-selected.
3026
+ */
3027
+ pressed?: boolean | 'mixed';
3028
+ /**
3029
+ * Indicates that the element is not editable, but is otherwise operable.
3030
+ * @see aria-disabled.
3031
+ */
3032
+ readOnly?: boolean;
3033
+ /**
3034
+ * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
3035
+ * @see aria-atomic.
3036
+ */
3037
+ relevant?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals';
3038
+ /**
3039
+ * Indicates that user input is required on the element before a form may be submitted.
3040
+ */
3041
+ required?: boolean;
3042
+ /**
3043
+ * Defines a human-readable, author-localized description for the role of an element.
3044
+ */
3045
+ roleDescription?: string;
3046
+ /**
3047
+ * Defines the total number of rows in a table, grid, or treegrid.
3048
+ * @see aria-rowindex.
3049
+ */
3050
+ rowCount?: number;
3051
+ /**
3052
+ * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
3053
+ * @see aria-rowcount @see aria-rowspan.
3054
+ */
3055
+ rowIndex?: number;
3056
+ /**
3057
+ * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
3058
+ * @see aria-rowindex @see aria-colspan.
3059
+ */
3060
+ rowSpan?: number;
3061
+ /**
3062
+ * Indicates the current "selected" state of various widgets.
3063
+ * @see aria-checked @see aria-pressed.
3064
+ */
3065
+ selected?: boolean;
3066
+ /**
3067
+ * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
3068
+ * @see aria-posinset.
3069
+ */
3070
+ setSize?: number;
3071
+ /**
3072
+ * Indicates if items in a table or grid are sorted in ascending or descending order.
3073
+ */
3074
+ sort?: 'none' | 'ascending' | 'descending' | 'other';
3075
+ /**
3076
+ * Defines the maximum allowed value for a range widget.
3077
+ */
3078
+ valueMax?: number;
3079
+ /**
3080
+ * Defines the minimum allowed value for a range widget.
3081
+ */
3082
+ valueMin?: number;
3083
+ /**
3084
+ * Defines the current value for a range widget.
3085
+ * @see aria-valuetext.
3086
+ */
3087
+ valueNow?: number;
3088
+ /**
3089
+ * Defines the human readable text alternative of aria-valuenow for a range widget.
3090
+ */
3091
+ valueText?: string;
3092
+ };
3093
+
3094
+ type InteractiveText = DotNotationToken<Theme['colors']['interactive']['text']>;
3095
+ type SurfaceText = DotNotationToken<Theme['colors']['surface']['text']>;
3096
+ type FeedbackText = DotNotationToken<Theme['colors']['feedback']['text']>;
3097
+ type TextColors = `interactive.text.${InteractiveText}` | `surface.text.${SurfaceText}` | `feedback.text.${FeedbackText}`;
3098
+ type As = 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'abbr' | 'q' | 'cite' | 'figcaption' | 'div' | 'label';
3099
+ type BaseTextProps = {
3100
+ id?: string;
3101
+ color?: TextColors;
3102
+ fontFamily?: keyof Theme['typography']['fonts']['family'];
3103
+ fontSize?: keyof Theme['typography']['fonts']['size'];
3104
+ fontWeight?: keyof Theme['typography']['fonts']['weight'];
3105
+ fontStyle?: 'italic' | 'normal';
3106
+ textDecorationLine?: 'line-through' | 'none' | 'underline';
3107
+ lineHeight?: keyof Theme['typography']['lineHeights'];
3108
+ letterSpacing?: keyof Theme['typography']['letterSpacings'];
3109
+ wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
3110
+ opacity?: number;
3111
+ /**
3112
+ * Web only
3113
+ */
3114
+ as?: As;
3115
+ textAlign?: 'center' | 'justify' | 'left' | 'right';
3116
+ truncateAfterLines?: number;
3117
+ className?: string;
3118
+ style?: React.CSSProperties;
3119
+ children: React.ReactNode;
3120
+ accessibilityProps?: Partial<AccessibilityProps>;
3121
+ /**
3122
+ * React Native only
3123
+ */
3124
+ numberOfLines?: number;
3125
+ componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code' | 'display';
3126
+ } & TestID & StyledPropsBlade;
3127
+ type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
3128
+
3129
+ type AmountSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
3130
+ type AmountDisplayProps = {
3131
+ type?: 'display';
3132
+ size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge'>;
3133
+ weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
3134
+ };
3135
+ type AmountHeadingProps = {
3136
+ type?: 'heading';
3137
+ size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
3138
+ weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;
3139
+ };
3140
+ type AmountBodyProps = {
3141
+ type?: 'body';
3142
+ size?: Extract<AmountSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
3143
+ weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
3144
+ };
3145
+ type AmountTypeProps = AmountDisplayProps | AmountHeadingProps | AmountBodyProps;
3146
+
3147
+ type AmountCommonProps = {
3148
+ /**
3149
+ * The value to be rendered within the component.
3150
+ *
3151
+ */
3152
+ value: number;
3153
+ /**
3154
+ * Sets the color of the amount.
3155
+ *
3156
+ * @default undefined
3157
+ */
3158
+ color?: BaseTextProps['color'];
3159
+ /**
3160
+ * Indicates what the suffix of amount should be
3161
+ *
3162
+ * @default 'decimals'
3163
+ */
3164
+ suffix?: 'decimals' | 'none' | 'humanize';
3165
+ /**
3166
+ * Makes the currency indicator(currency symbol/code) and decimal digits small and faded
3167
+ *
3168
+ * @default true
3169
+ */
3170
+ isAffixSubtle?: true | false;
3171
+ /**
3172
+ * Determines the visual representation of the currency, choose between displaying the currency symbol or code.
3173
+ *
3174
+ * Note: Currency symbol and code is determined by the locale set in user's browser or set via @razorpay/i18nify-react library.
3175
+ *
3176
+ * @default 'currency-symbol'
3177
+ */
3178
+ currencyIndicator?: 'currency-symbol' | 'currency-code';
3179
+ /**
3180
+ * The currency of the amount. Note that this component
3181
+ * only displays the provided value in the specified currency, it does not perform any currency conversion.
3182
+ *
3183
+ * @default 'INR'
3184
+ * */
3185
+ currency?: CurrencyCodeType;
3186
+ /**
3187
+ * If true, the amount text will have a line through it.
3188
+ *
3189
+ * @default false
3190
+ */
3191
+ isStrikethrough?: boolean;
3192
+ } & TestID & StyledPropsBlade;
3193
+ type AmountProps = AmountTypeProps & AmountCommonProps;
3194
+ declare const Amount: ({ value, suffix, type, size, weight, isAffixSubtle, isStrikethrough, color, currencyIndicator, currency, testID, ...styledProps }: AmountProps) => ReactElement;
3195
+
3196
+ type SnapPoints = [number, number, number];
3197
+
3198
+ type BaseFooterProps = {
3199
+ children: React__default.ReactNode;
3200
+ metaComponentName?: string;
3201
+ showDivider?: boolean;
3202
+ } & TestID;
3203
+
3204
+ type BottomSheetProps = {
3205
+ /**
3206
+ * Accepts BottomSheetHeader, BottomSheetFooter, BottomSheetBody
3207
+ */
3208
+ children: React.ReactNode;
3209
+ /**
3210
+ * SnapPoints in which the bottom sheeet will rest on.
3211
+ * Accepts numbers between 0 & 1 which maps to the total view height of the screen, 0.5 means 50% of screen height.
3212
+ *
3213
+ * @default [0.35, 0.5, 0.85]
3214
+ */
3215
+ snapPoints?: SnapPoints;
3216
+ /**
3217
+ * Called when the bottom sheet is closed, either by user state, hitting `esc` or tapping backdrop
3218
+ */
3219
+ onDismiss?: () => void;
3220
+ /**
3221
+ * Toggles bottom sheet state
3222
+ *
3223
+ * @default false
3224
+ */
3225
+ isOpen?: boolean;
3226
+ /**
3227
+ * Ref element you want to get keyboard focus when opening the sheet
3228
+ * By default the initial focus will go to the close button
3229
+ */
3230
+ initialFocusRef?: React.MutableRefObject<any>;
3231
+ /**
3232
+ * Sets the z-index of the bottom sheet
3233
+ * Note: when using stacked bottom sheet make sure all the bottom sheets have the same zIndex
3234
+ * @default 100
3235
+ */
3236
+ zIndex?: number;
3237
+ };
3238
+ type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick' | 'children'> & {
3239
+ /**
3240
+ * Trailing element to be rendered in the Header
3241
+ *
3242
+ * Accepts one of `Badge`, `Text`, `Button`, `Link`
3243
+ */
3244
+ trailing?: BaseHeaderProps['trailing'];
3245
+ /**
3246
+ * Renders an adornment besides the title
3247
+ *
3248
+ * Accepts `Counter`
3249
+ */
3250
+ titleSuffix?: BaseHeaderProps['titleSuffix'];
3251
+ };
3252
+ type BottomSheetFooterProps = Pick<BaseFooterProps, 'children'>;
3253
+ type BottomSheetBodyProps = {
3254
+ children: React.ReactNode;
3255
+ /**
3256
+ * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately
3257
+ * @default `spacing.5`
3258
+ *
3259
+ * **Links:**
3260
+ * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
3261
+ */
3262
+ padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.5'>;
3263
+ };
3264
+
3265
+ declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trailing, showBackButton, onBackButtonClick, children, }: BottomSheetHeaderProps) => React__default.ReactElement;
3266
+
3267
+ declare const BottomSheetFooter: ({ children }: BaseFooterProps) => React__default.ReactElement;
3268
+
3269
+ declare const BottomSheetBody: ({ children, padding, }: BottomSheetBodyProps) => React__default.ReactElement;
3270
+
3271
+ declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, zIndex, }: BottomSheetProps) => React__default.ReactElement;
3272
+
3273
+ type BaseLinkCommonProps = {
3274
+ color?: 'primary' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
3275
+ icon?: IconComponent;
3276
+ iconPosition?: 'left' | 'right';
3277
+ onClick?: (event: SyntheticEvent) => void;
3278
+ onBlur?: Platform.Select<{
3279
+ native: (event: GestureResponderEvent) => void;
3280
+ web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
3281
+ }>;
3282
+ onMouseLeave?: Platform.Select<{
3283
+ native: (event: GestureResponderEvent) => void;
3284
+ web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
3285
+ }>;
3286
+ onKeyDown?: Platform.Select<{
3287
+ native: (event: GestureResponderEvent) => void;
3288
+ web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
3289
+ }>;
3290
+ accessibilityProps?: Partial<AccessibilityProps>;
3291
+ /**
3292
+ * Sets the size of the link
3293
+ *
3294
+ * @default medium
3295
+ */
3296
+ size?: Extract<BaseTextSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
3297
+ /**
3298
+ * Defines how far your touch can start away from the link. This is a react-native only prop and has no effect on web.
3299
+ */
3300
+ hitSlop?: {
3301
+ top?: number;
3302
+ right?: number;
3303
+ bottom?: number;
3304
+ left?: number;
3305
+ } | number;
3306
+ /**
3307
+ * The title of the link which is displayed as a tooltip. This is a web only prop and has no effect on react-native.
3308
+ */
3309
+ htmlTitle?: string;
3310
+ opacity?: number;
3311
+ } & TestID & StyledPropsBlade & Omit<BladeCommonEvents, 'onBlur' | 'onMouseLeave'>;
3312
+ type BaseLinkWithoutIconProps = BaseLinkCommonProps & {
3313
+ icon?: undefined;
3314
+ children: StringChildrenType;
3315
+ };
3316
+ type BaseLinkWithIconProps = BaseLinkCommonProps & {
3317
+ icon: IconComponent;
3318
+ children?: StringChildrenType;
3319
+ };
3320
+ type BaseLinkPropsWithOrWithoutIcon = BaseLinkWithIconProps | BaseLinkWithoutIconProps;
3321
+ type BaseLinkAnchorVariantProps = BaseLinkPropsWithOrWithoutIcon & {
3322
+ variant?: 'anchor';
3323
+ href?: string;
3324
+ target?: string;
3325
+ rel?: string;
3326
+ isDisabled?: undefined;
3327
+ };
3328
+ type BaseLinkButtonVariantProps = BaseLinkPropsWithOrWithoutIcon & {
3329
+ variant?: 'button';
3330
+ isDisabled?: boolean;
3331
+ href?: undefined;
3332
+ target?: undefined;
3333
+ rel?: undefined;
3334
+ };
3335
+ type BaseLinkProps = BaseLinkAnchorVariantProps | BaseLinkButtonVariantProps;
3336
+
3337
+ type LinkCommonProps = {
3338
+ variant?: 'anchor' | 'button';
3339
+ icon?: IconComponent;
3340
+ color?: 'primary' | 'white' | 'neutral';
3341
+ iconPosition?: 'left' | 'right';
3342
+ isDisabled?: boolean;
3343
+ onClick?: (event: SyntheticEvent) => void;
3344
+ href?: string;
3345
+ target?: string;
3346
+ accessibilityLabel?: string;
3347
+ /**
3348
+ * It is exposed for internal usage with tooltip.
3349
+ *
3350
+ * @private
3351
+ */
3352
+ 'aria-describedby'?: string;
3353
+ /**
3354
+ * Sets the size of the link
3355
+ *
3356
+ * @default medium
3357
+ */
3358
+ size?: BaseLinkProps['size'];
3359
+ } & TestID & StyledPropsBlade & BladeCommonEvents & Platform.Select<{
3360
+ native: {
3361
+ /**
3362
+ * Defines how far your touch can start away from the link
3363
+ */
3364
+ hitSlop?: {
3365
+ top?: number;
3366
+ right?: number;
3367
+ bottom?: number;
3368
+ left?: number;
3369
+ } | number;
3370
+ /**
3371
+ * This is a web only prop and has no effect on react-native.
3372
+ */
3373
+ htmlTitle?: undefined;
3359
3374
  };
3360
- borderWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
3361
- readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
3362
- readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
3363
- readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
3364
- readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
3365
- readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
3366
- readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
3375
+ web: {
3376
+ /**
3377
+ * This is a react-native only prop and has no effect on web.
3378
+ */
3379
+ hitSlop?: undefined;
3380
+ /**
3381
+ * The title of the link which is displayed as a tooltip.
3382
+ */
3383
+ htmlTitle?: string;
3367
3384
  };
3368
- __brand__?: "platform-web" | {
3369
- readonly base?: "platform-web" | undefined;
3370
- readonly xs?: "platform-web" | undefined;
3371
- readonly s?: "platform-web" | undefined;
3372
- readonly m?: "platform-web" | undefined;
3373
- readonly l?: "platform-web" | undefined;
3374
- readonly xl?: "platform-web" | undefined;
3375
- } | undefined;
3376
- } & MakeObjectResponsive<{
3377
- 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";
3378
- }, "backgroundColor"> & {
3379
- as: "aside" | "div" | "footer" | "header" | "label" | "main" | "nav" | "section" | "span";
3380
- } & {
3381
- children?: React__default.ReactNode | React__default.ReactNode[];
3382
- tabIndex?: number | undefined;
3383
- id?: string | undefined;
3384
- } & TestID> & React__default.RefAttributes<BoxRefType>>;
3385
+ }>;
3386
+ type LinkWithoutIconProps = LinkCommonProps & {
3387
+ icon?: undefined;
3388
+ children: StringChildrenType;
3389
+ };
3390
+ type LinkWithIconProps = LinkCommonProps & {
3391
+ icon: IconComponent;
3392
+ children?: StringChildrenType;
3393
+ };
3394
+ type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
3395
+ type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
3396
+ variant?: 'anchor';
3397
+ href?: string;
3398
+ target?: string;
3399
+ rel?: string;
3400
+ isDisabled?: undefined;
3401
+ };
3402
+ type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
3403
+ variant?: 'button';
3404
+ isDisabled?: boolean;
3405
+ href?: undefined;
3406
+ target?: undefined;
3407
+ rel?: undefined;
3408
+ };
3409
+ type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
3410
+ declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<BladeElementRef>>;
3411
+
3412
+ type BreadcrumbProps = StyledPropsBlade & {
3413
+ /**
3414
+ * Size of the Breadcrumb
3415
+ *
3416
+ * @default medium
3417
+ */
3418
+ size?: 'small' | 'medium' | 'large';
3419
+ /**
3420
+ * Color of the Breadcrumb
3421
+ *
3422
+ * @default neutral
3423
+ */
3424
+ color?: 'neutral' | 'primary' | 'white';
3425
+ /**
3426
+ * Content of the Breadcrumb, accepts BreadcrumbItem
3427
+ */
3428
+ children: React.ReactNode;
3429
+ /**
3430
+ * Whether to show the last separator
3431
+ */
3432
+ showLastSeparator?: boolean;
3433
+ /**
3434
+ * aria-label for breadcrumb
3435
+ */
3436
+ accessibilityLabel?: string;
3437
+ };
3438
+ type BreadcrumbItemProps = {
3439
+ /**
3440
+ * Href of the BreadcrumbItem
3441
+ */
3442
+ href: string;
3443
+ /**
3444
+ * Function to be called on click of the BreadcrumbItem,
3445
+ *
3446
+ * This can be used to integrate with routing libraries like `react-router-dom`
3447
+ */
3448
+ onClick?: LinkProps['onClick'];
3449
+ /**
3450
+ * Whether the BreadcrumbItem is the current page,
3451
+ * Sets the aria-current attribute to `page`
3452
+ *
3453
+ * @default false
3454
+ */
3455
+ isCurrentPage?: boolean;
3456
+ /**
3457
+ * Content of the BreadcrumbItem
3458
+ */
3459
+ children?: StringChildrenType;
3460
+ /**
3461
+ * Icon to be shown before the BreadcrumbItem
3462
+ */
3463
+ icon?: IconComponent;
3464
+ /**
3465
+ * Accessibility label for the BreadcrumbItem, can be used in icon only variant
3466
+ */
3467
+ accessibilityLabel?: string;
3468
+ };
3469
+
3470
+ declare const Breadcrumb: ({ size, color, showLastSeparator, accessibilityLabel, children, ...styledProps }: BreadcrumbProps) => React__default.ReactElement;
3471
+
3472
+ declare const BreadcrumbItem: ({ children, href, icon: Icon, isCurrentPage, onClick, accessibilityLabel, }: BreadcrumbItemProps) => React__default.ReactElement;
3385
3473
 
3386
3474
  type BaseButtonCommonProps = {
3387
3475
  href?: BaseLinkProps['href'];
@@ -3535,6 +3623,73 @@ declare const IconButton: React__default.ForwardRefExoticComponent<{
3535
3623
  __brand__?: "platform-web" | undefined;
3536
3624
  } & React__default.RefAttributes<BladeElementRef>>;
3537
3625
 
3626
+ type ButtonGroupProps = {
3627
+ /**
3628
+ * Accepts multiple Button components as children
3629
+ */
3630
+ children: React.ReactNode;
3631
+ /**
3632
+ * Specifies the visual style variant of the ButtonGroup.
3633
+ *
3634
+ * @default 'primary'
3635
+ */
3636
+ variant?: ButtonProps['variant'];
3637
+ /**
3638
+ * Specifies the size of the ButtonGroup.
3639
+ *
3640
+ * @default 'medium'
3641
+ */
3642
+ size?: ButtonProps['size'];
3643
+ /**
3644
+ * Specifies the color of the ButtonGroup.
3645
+ *
3646
+ * @default 'primary'
3647
+ */
3648
+ color?: ButtonProps['color'];
3649
+ /**
3650
+ * Specifies whether the ButtonGroup should take up the full width of its container.
3651
+ */
3652
+ isFullWidth?: boolean;
3653
+ /**
3654
+ * Disables or enables the ButtonGroup component
3655
+ *
3656
+ * @default false
3657
+ */
3658
+ isDisabled?: boolean;
3659
+ /**
3660
+ * Test ID for automation
3661
+ */
3662
+ testID?: string;
3663
+ };
3664
+
3665
+ /**
3666
+ * ### ButtonGroup Component
3667
+ *
3668
+ * The ButtonGroup component is used to group related buttons together.
3669
+ *
3670
+ * ---
3671
+ *
3672
+ * #### Usage
3673
+ *
3674
+ * ```jsx
3675
+ const App = () => {
3676
+ return (
3677
+ <ButtonGroup>
3678
+ <Button icon={RefreshIcon}>Sync</Button>
3679
+ <Button icon={ShareIcon}>Share</Button>
3680
+ <Button icon={DownloadIcon}>Download</Button>
3681
+ </ButtonGroup>
3682
+ );
3683
+ }
3684
+ * ```
3685
+ *
3686
+ * ---
3687
+ *
3688
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-buttongroup FileUpload Documentation}
3689
+ *
3690
+ */
3691
+ declare const ButtonGroup: ({ children, isDisabled, size, color, variant, isFullWidth, testID, ...styledProps }: ButtonGroupProps) => React__default.ReactElement;
3692
+
3538
3693
  type CardSpacingValueType = Extract<SpacingValueType, 'spacing.0' | 'spacing.3' | 'spacing.4' | 'spacing.5' | 'spacing.7'>;
3539
3694
 
3540
3695
  declare const ComponentIds: {
@@ -9070,4 +9225,4 @@ declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => Rea
9070
9225
  */
9071
9226
  declare const screenReaderStyles: CSSObject;
9072
9227
 
9073
- export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AutoComplete, AutoCompleteProps, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, 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, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileUploadProps, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, 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, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme, useToast };
9228
+ export { Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AutoComplete, AutoCompleteProps, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, 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, BulkPayoutsIcon, 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, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileUploadProps, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, 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, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme, useToast };