@databricks/design-system 1.9.2 → 1.9.3

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 (200) hide show
  1. package/dist/{Typography-74e19785.js → Spinner-140f57ac.js} +1080 -27
  2. package/dist/Spinner-140f57ac.js.map +1 -0
  3. package/dist/common-3ab0e300.js +15 -0
  4. package/dist/common-3ab0e300.js.map +1 -0
  5. package/dist/design-system/Button/Button.d.ts +5 -1
  6. package/dist/design-system/Button/Button.d.ts.map +1 -1
  7. package/dist/design-system/Button/styles.d.ts.map +1 -1
  8. package/dist/design-system/Checkbox/Checkbox.d.ts.map +1 -1
  9. package/dist/design-system/DatePicker/DatePicker.d.ts +18 -14
  10. package/dist/design-system/DatePicker/DatePicker.d.ts.map +1 -1
  11. package/dist/design-system/Drawer/Drawer.d.ts +6 -1
  12. package/dist/design-system/Drawer/Drawer.d.ts.map +1 -1
  13. package/dist/design-system/FormV2/RHFAdapters.d.ts +7 -7
  14. package/dist/design-system/FormV2/RHFAdapters.d.ts.map +1 -1
  15. package/dist/design-system/Icon/__generated/icons/index.d.ts +0 -35
  16. package/dist/design-system/Icon/__generated/icons/index.d.ts.map +1 -1
  17. package/dist/design-system/LegacyTable/LegacyTable.d.ts +100 -0
  18. package/dist/design-system/LegacyTable/LegacyTable.d.ts.map +1 -0
  19. package/dist/design-system/LegacyTable/index.d.ts +2 -0
  20. package/dist/design-system/LegacyTable/index.d.ts.map +1 -0
  21. package/dist/design-system/Modal/Modal.d.ts +3 -1
  22. package/dist/design-system/Modal/Modal.d.ts.map +1 -1
  23. package/dist/design-system/Notification/Notification.d.ts.map +1 -1
  24. package/dist/design-system/PageWrapper/PageWrapper.d.ts.map +1 -1
  25. package/dist/design-system/PopoverV2/PopoverV2.d.ts +1 -0
  26. package/dist/design-system/PopoverV2/PopoverV2.d.ts.map +1 -1
  27. package/dist/design-system/Radio/Radio.d.ts.map +1 -1
  28. package/dist/design-system/SegmentedControl/SegmentedControl.d.ts +0 -2
  29. package/dist/design-system/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  30. package/dist/design-system/SplitButton/Dropdown/DropdownButton.d.ts.map +1 -1
  31. package/dist/design-system/Table/index.d.ts +1 -1
  32. package/dist/design-system/ToggleButton/ToggleButton.d.ts.map +1 -1
  33. package/dist/design-system/ToggleButton/index.d.ts +2 -0
  34. package/dist/design-system/ToggleButton/index.d.ts.map +1 -0
  35. package/dist/design-system/index.d.ts +2 -1
  36. package/dist/design-system/index.d.ts.map +1 -1
  37. package/dist/development/Filter/Filter.d.ts +10 -0
  38. package/dist/development/Filter/Filter.d.ts.map +1 -0
  39. package/dist/development/Filter/Filter.test.d.ts +2 -0
  40. package/dist/development/Filter/Filter.test.d.ts.map +1 -0
  41. package/dist/development/Filter/FilterButtonContainer.d.ts +2 -0
  42. package/dist/development/Filter/FilterButtonContainer.d.ts.map +1 -0
  43. package/dist/development/Filter/FilterContent.d.ts +14 -0
  44. package/dist/development/Filter/FilterContent.d.ts.map +1 -0
  45. package/dist/development/Filter/FilterCountBadge.d.ts +2 -0
  46. package/dist/development/Filter/FilterCountBadge.d.ts.map +1 -0
  47. package/dist/development/Filter/FilterLoadingSpinner.d.ts +2 -0
  48. package/dist/development/Filter/FilterLoadingSpinner.d.ts.map +1 -0
  49. package/dist/development/Filter/FilterOptionControlledList.d.ts +9 -0
  50. package/dist/development/Filter/FilterOptionControlledList.d.ts.map +1 -0
  51. package/dist/development/Filter/FilterOptionList.d.ts +10 -0
  52. package/dist/development/Filter/FilterOptionList.d.ts.map +1 -0
  53. package/dist/development/Filter/FilterOptionListCheckboxItem.d.ts +11 -0
  54. package/dist/development/Filter/FilterOptionListCheckboxItem.d.ts.map +1 -0
  55. package/dist/development/Filter/FilterOptionListSearch.d.ts +7 -0
  56. package/dist/development/Filter/FilterOptionListSearch.d.ts.map +1 -0
  57. package/dist/development/Filter/FilterOptionListSelectItem.d.ts +10 -0
  58. package/dist/development/Filter/FilterOptionListSelectItem.d.ts.map +1 -0
  59. package/dist/development/Filter/FilterSectionHeader.d.ts +2 -0
  60. package/dist/development/Filter/FilterSectionHeader.d.ts.map +1 -0
  61. package/dist/development/Filter/FilterSeparator.d.ts +2 -0
  62. package/dist/development/Filter/FilterSeparator.d.ts.map +1 -0
  63. package/dist/development/Filter/FilterTrigger.d.ts +15 -0
  64. package/dist/development/Filter/FilterTrigger.d.ts.map +1 -0
  65. package/dist/development/Filter/hooks/useFilterContext.d.ts +2 -0
  66. package/dist/development/Filter/hooks/useFilterContext.d.ts.map +1 -0
  67. package/dist/development/Filter/hooks/useFilterOptionListContext.d.ts +2 -0
  68. package/dist/development/Filter/hooks/useFilterOptionListContext.d.ts.map +1 -0
  69. package/dist/development/Filter/index.d.ts +14 -0
  70. package/dist/development/Filter/index.d.ts.map +1 -0
  71. package/dist/development/Filter/providers/FilterContext.d.ts +15 -0
  72. package/dist/development/Filter/providers/FilterContext.d.ts.map +1 -0
  73. package/dist/development/Filter/providers/FilterOptionListContext.d.ts +10 -0
  74. package/dist/development/Filter/providers/FilterOptionListContext.d.ts.map +1 -0
  75. package/dist/development/Filter/shared.d.ts +3 -0
  76. package/dist/development/Filter/shared.d.ts.map +1 -0
  77. package/dist/development/ListPagePattern/index.d.ts +1 -0
  78. package/dist/development/ListPagePattern/index.d.ts.map +1 -0
  79. package/dist/development/TableUI/index.d.ts +19 -0
  80. package/dist/development/TableUI/index.d.ts.map +1 -1
  81. package/dist/development/index.d.ts +1 -0
  82. package/dist/development/index.d.ts.map +1 -1
  83. package/dist/development.js +1056 -52
  84. package/dist/development.js.map +1 -1
  85. package/dist/index.js +623 -1508
  86. package/dist/index.js.map +1 -1
  87. package/dist/test-utils/common.d.ts +11 -0
  88. package/dist/test-utils/common.d.ts.map +1 -0
  89. package/dist/test-utils/enzyme/index.d.ts +1 -0
  90. package/dist/test-utils/enzyme/index.d.ts.map +1 -1
  91. package/dist/test-utils/enzyme/selectEvent.d.ts +42 -0
  92. package/dist/test-utils/enzyme/selectEvent.d.ts.map +1 -0
  93. package/dist/test-utils/enzyme/selectEvent.test.d.ts +2 -0
  94. package/dist/test-utils/enzyme/selectEvent.test.d.ts.map +1 -0
  95. package/dist/test-utils/enzyme/utils.d.ts +33 -0
  96. package/dist/test-utils/enzyme/utils.d.ts.map +1 -0
  97. package/dist/test-utils/enzyme.js +258 -1
  98. package/dist/test-utils/enzyme.js.map +1 -1
  99. package/dist/test-utils/rtl/index.d.ts +1 -0
  100. package/dist/test-utils/rtl/index.d.ts.map +1 -1
  101. package/dist/test-utils/rtl/selectEvent.d.ts +41 -0
  102. package/dist/test-utils/rtl/selectEvent.d.ts.map +1 -0
  103. package/dist/test-utils/rtl/selectEvent.test.d.ts +2 -0
  104. package/dist/test-utils/rtl/selectEvent.test.d.ts.map +1 -0
  105. package/dist/test-utils/rtl.js +135 -1
  106. package/dist/test-utils/rtl.js.map +1 -1
  107. package/dist/test-utils/types.d.ts +1 -14
  108. package/dist/test-utils/types.d.ts.map +1 -1
  109. package/dist/theme/colorList.d.ts +6 -7
  110. package/dist/theme/colorList.d.ts.map +1 -1
  111. package/dist/theme/colors.d.ts +6 -7
  112. package/dist/theme/colors.d.ts.map +1 -1
  113. package/package.json +4 -3
  114. package/dist/Typography-04e40f87.js +0 -1465
  115. package/dist/Typography-04e40f87.js.map +0 -1
  116. package/dist/Typography-52abe0b7.js +0 -1142
  117. package/dist/Typography-52abe0b7.js.map +0 -1
  118. package/dist/Typography-74e19785.js.map +0 -1
  119. package/dist/Typography-84a00e02.js +0 -1465
  120. package/dist/Typography-84a00e02.js.map +0 -1
  121. package/dist/design-system/Icon/__generated/icons/ArrayIcon.v2.d.ts +0 -4
  122. package/dist/design-system/Icon/__generated/icons/ArrayIcon.v2.d.ts.map +0 -1
  123. package/dist/design-system/Icon/__generated/icons/BookmarkBorderIcon.d.ts +0 -4
  124. package/dist/design-system/Icon/__generated/icons/BookmarkBorderIcon.d.ts.map +0 -1
  125. package/dist/design-system/Icon/__generated/icons/BracketsIcon.v2.d.ts +0 -4
  126. package/dist/design-system/Icon/__generated/icons/BracketsIcon.v2.d.ts.map +0 -1
  127. package/dist/design-system/Icon/__generated/icons/CheckCircleBorderIcon.d.ts +0 -4
  128. package/dist/design-system/Icon/__generated/icons/CheckCircleBorderIcon.d.ts.map +0 -1
  129. package/dist/design-system/Icon/__generated/icons/ClusterIcon.d.ts +0 -4
  130. package/dist/design-system/Icon/__generated/icons/ClusterIcon.d.ts.map +0 -1
  131. package/dist/design-system/Icon/__generated/icons/ClustersIcon.d.ts +0 -4
  132. package/dist/design-system/Icon/__generated/icons/ClustersIcon.d.ts.map +0 -1
  133. package/dist/design-system/Icon/__generated/icons/DataMarketplace.v2.d.ts +0 -4
  134. package/dist/design-system/Icon/__generated/icons/DataMarketplace.v2.d.ts.map +0 -1
  135. package/dist/design-system/Icon/__generated/icons/ErrorBorderIcon.d.ts +0 -4
  136. package/dist/design-system/Icon/__generated/icons/ErrorBorderIcon.d.ts.map +0 -1
  137. package/dist/design-system/Icon/__generated/icons/ErrorFillIcon.d.ts +0 -4
  138. package/dist/design-system/Icon/__generated/icons/ErrorFillIcon.d.ts.map +0 -1
  139. package/dist/design-system/Icon/__generated/icons/ExperimentIcon.d.ts +0 -4
  140. package/dist/design-system/Icon/__generated/icons/ExperimentIcon.d.ts.map +0 -1
  141. package/dist/design-system/Icon/__generated/icons/Folder1Icon.d.ts +0 -4
  142. package/dist/design-system/Icon/__generated/icons/Folder1Icon.d.ts.map +0 -1
  143. package/dist/design-system/Icon/__generated/icons/Gear1Icon.d.ts +0 -4
  144. package/dist/design-system/Icon/__generated/icons/Gear1Icon.d.ts.map +0 -1
  145. package/dist/design-system/Icon/__generated/icons/InfoBorderIcon.d.ts +0 -4
  146. package/dist/design-system/Icon/__generated/icons/InfoBorderIcon.d.ts.map +0 -1
  147. package/dist/design-system/Icon/__generated/icons/LifesaverIcon.d.ts +0 -4
  148. package/dist/design-system/Icon/__generated/icons/LifesaverIcon.d.ts.map +0 -1
  149. package/dist/design-system/Icon/__generated/icons/LinkRemoveIcon.d.ts +0 -4
  150. package/dist/design-system/Icon/__generated/icons/LinkRemoveIcon.d.ts.map +0 -1
  151. package/dist/design-system/Icon/__generated/icons/LockBorderIcon.d.ts +0 -4
  152. package/dist/design-system/Icon/__generated/icons/LockBorderIcon.d.ts.map +0 -1
  153. package/dist/design-system/Icon/__generated/icons/MinusCircleBorderIcon.d.ts +0 -4
  154. package/dist/design-system/Icon/__generated/icons/MinusCircleBorderIcon.d.ts.map +0 -1
  155. package/dist/design-system/Icon/__generated/icons/NotificationsOffIcon.v2.d.ts +0 -4
  156. package/dist/design-system/Icon/__generated/icons/NotificationsOffIcon.v2.d.ts.map +0 -1
  157. package/dist/design-system/Icon/__generated/icons/PinBorderIcon.d.ts +0 -4
  158. package/dist/design-system/Icon/__generated/icons/PinBorderIcon.d.ts.map +0 -1
  159. package/dist/design-system/Icon/__generated/icons/PlayCircleBorderIcon.d.ts +0 -4
  160. package/dist/design-system/Icon/__generated/icons/PlayCircleBorderIcon.d.ts.map +0 -1
  161. package/dist/design-system/Icon/__generated/icons/PlusCircleBorderIcon.d.ts +0 -4
  162. package/dist/design-system/Icon/__generated/icons/PlusCircleBorderIcon.d.ts.map +0 -1
  163. package/dist/design-system/Icon/__generated/icons/QueryListViewIcon.d.ts +0 -4
  164. package/dist/design-system/Icon/__generated/icons/QueryListViewIcon.d.ts.map +0 -1
  165. package/dist/design-system/Icon/__generated/icons/QueryNavIcon.d.ts +0 -4
  166. package/dist/design-system/Icon/__generated/icons/QueryNavIcon.d.ts.map +0 -1
  167. package/dist/design-system/Icon/__generated/icons/QuestionMarkBorderIcon.d.ts +0 -4
  168. package/dist/design-system/Icon/__generated/icons/QuestionMarkBorderIcon.d.ts.map +0 -1
  169. package/dist/design-system/Icon/__generated/icons/Redo.d.ts +0 -4
  170. package/dist/design-system/Icon/__generated/icons/Redo.d.ts.map +0 -1
  171. package/dist/design-system/Icon/__generated/icons/RedoIcon.v2.d.ts +0 -4
  172. package/dist/design-system/Icon/__generated/icons/RedoIcon.v2.d.ts.map +0 -1
  173. package/dist/design-system/Icon/__generated/icons/Refresh.d.ts +0 -4
  174. package/dist/design-system/Icon/__generated/icons/Refresh.d.ts.map +0 -1
  175. package/dist/design-system/Icon/__generated/icons/Refresh.v2.d.ts +0 -4
  176. package/dist/design-system/Icon/__generated/icons/Refresh.v2.d.ts.map +0 -1
  177. package/dist/design-system/Icon/__generated/icons/RefreshIcon.v2.d.ts +0 -4
  178. package/dist/design-system/Icon/__generated/icons/RefreshIcon.v2.d.ts.map +0 -1
  179. package/dist/design-system/Icon/__generated/icons/Search1Icon.d.ts +0 -4
  180. package/dist/design-system/Icon/__generated/icons/Search1Icon.d.ts.map +0 -1
  181. package/dist/design-system/Icon/__generated/icons/StarBorderIcon.d.ts +0 -4
  182. package/dist/design-system/Icon/__generated/icons/StarBorderIcon.d.ts.map +0 -1
  183. package/dist/design-system/Icon/__generated/icons/StopCircleBorderIcon.d.ts +0 -4
  184. package/dist/design-system/Icon/__generated/icons/StopCircleBorderIcon.d.ts.map +0 -1
  185. package/dist/design-system/Icon/__generated/icons/StopCricleFillIcon.d.ts +0 -4
  186. package/dist/design-system/Icon/__generated/icons/StopCricleFillIcon.d.ts.map +0 -1
  187. package/dist/design-system/Icon/__generated/icons/Undo.d.ts +0 -4
  188. package/dist/design-system/Icon/__generated/icons/Undo.d.ts.map +0 -1
  189. package/dist/design-system/Icon/__generated/icons/Visible.d.ts +0 -4
  190. package/dist/design-system/Icon/__generated/icons/Visible.d.ts.map +0 -1
  191. package/dist/design-system/Icon/__generated/icons/VisibleOff.d.ts +0 -4
  192. package/dist/design-system/Icon/__generated/icons/VisibleOff.d.ts.map +0 -1
  193. package/dist/design-system/Icon/__generated/icons/WarningBorderIcon.d.ts +0 -4
  194. package/dist/design-system/Icon/__generated/icons/WarningBorderIcon.d.ts.map +0 -1
  195. package/dist/design-system/Icon/__generated/icons/XCircleBorderIcon.d.ts +0 -4
  196. package/dist/design-system/Icon/__generated/icons/XCircleBorderIcon.d.ts.map +0 -1
  197. package/dist/test-utils/enzyme.d.ts +0 -8
  198. package/dist/test-utils/enzyme.d.ts.map +0 -1
  199. package/dist/test-utils/rtl.d.ts +0 -7
  200. package/dist/test-utils/rtl.d.ts.map +0 -1
@@ -1,1465 +0,0 @@
1
- import React__default, { createContext, useMemo, useEffect, useContext, forwardRef } from 'react';
2
- import { jsx, jsxs } from '@emotion/react/jsx-runtime';
3
- import { useTheme, ThemeProvider, css } from '@emotion/react';
4
- import { notification, ConfigProvider, Checkbox as Checkbox$1, Typography as Typography$1 } from 'antd';
5
- import classnames from 'classnames';
6
- import chroma from 'chroma-js';
7
- import AntDIcon from '@ant-design/icons';
8
- import _isNil from 'lodash/isNil';
9
- import _endsWith from 'lodash/endsWith';
10
- import _isBoolean from 'lodash/isBoolean';
11
- import _isNumber from 'lodash/isNumber';
12
- import _isString from 'lodash/isString';
13
- import _mapValues from 'lodash/mapValues';
14
- import unitless from '@emotion/unitless';
15
-
16
- // Border variables
17
- const borders = {
18
- borderRadiusMd: 4
19
- };
20
-
21
- // eslint-disable-next-line import/no-anonymous-default-export
22
- var borders$1 = {
23
- ...borders
24
- };
25
-
26
- // Exported from go/designsystem/colorsheet
27
- const colorPalettePrimary = {
28
- primary: '#2272B4',
29
- blue100: '#F0F8FF',
30
- blue200: '#D7EDFE',
31
- blue300: '#BAE1FC',
32
- blue400: '#8ACAFF',
33
- blue500: '#4299E0',
34
- blue600: '#2272B4',
35
- blue700: '#0E538B',
36
- blue800: '#04355D',
37
- green100: '#F3FCF6',
38
- green200: '#D4F7DF',
39
- green300: '#B1ECC5',
40
- green400: '#8DDDA8',
41
- green500: '#3CAA60',
42
- green600: '#277C43',
43
- green700: '#115026',
44
- green800: '#093919',
45
- white: '#FFFFFF',
46
- grey100: '#F2F5F7',
47
- grey200: '#E4ECF1',
48
- grey300: '#CDDAE5',
49
- grey400: '#BDCDDB',
50
- grey500: '#8196A7',
51
- grey600: '#5D7283',
52
- grey700: '#44535F',
53
- grey800: '#1F272D',
54
- red100: '#FFF5F7',
55
- red200: '#FDE2E8',
56
- red300: '#FBD0D8',
57
- red400: '#F792A6',
58
- red500: '#E65B77',
59
- red600: '#C82D4C',
60
- red700: '#9E102C',
61
- red800: '#630316',
62
- yellow100: '#FFF9EB',
63
- yellow200: '#FCEACA',
64
- yellow300: '#F8D4A5',
65
- yellow400: '#F2BE88',
66
- yellow500: '#DE7921',
67
- yellow600: '#BE501E',
68
- yellow700: '#93320B',
69
- yellow800: '#5F1B02'
70
- };
71
- const colorPaletteSecondary = {
72
- brown: '#A6630C',
73
- coral: '#C83243',
74
- charcoal: '#5D7283',
75
- indigo: '#434A93',
76
- lemon: '#FACB66',
77
- lime: '#308613',
78
- pink: '#B45091',
79
- purple: '#8A63BF',
80
- teal: '#04867D',
81
- turquoise: '#157CBC'
82
- };
83
-
84
- // Colors taken from figma designs but not part of official list (yet)
85
- const unstableColors = {
86
- textValidationInfo: '#64727D',
87
- backgroundValidationDanger: colorPalettePrimary.red100,
88
- backgroundValidationSuccess: colorPalettePrimary.blue100,
89
- backgroundValidationWarning: colorPalettePrimary.yellow100,
90
- borderValidationDanger: colorPalettePrimary.red300,
91
- borderValidationSuccess: colorPalettePrimary.blue300,
92
- borderValidationWarning: colorPalettePrimary.yellow300
93
- };
94
- const lightColorList = {
95
- backgroundPrimary: colorPalettePrimary.white,
96
- actionDangerPrimaryBackgroundDefault: colorPalettePrimary.red600,
97
- actionDangerPrimaryBackgroundHover: colorPalettePrimary.red700,
98
- actionDangerPrimaryBackgroundPress: colorPalettePrimary.red800,
99
- actionDangerDefaultBackgroundDefault: chroma(colorPalettePrimary.red600).alpha(0).hex(),
100
- actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red600).alpha(0.08).hex(),
101
- actionDangerDefaultBackgroundPress: chroma(colorPalettePrimary.red600).alpha(0.16).hex(),
102
- actionDangerDefaultBorderDefault: colorPalettePrimary.red600,
103
- actionDangerDefaultBorderHover: colorPalettePrimary.red700,
104
- actionDangerDefaultBorderPress: colorPalettePrimary.red800,
105
- actionDangerDefaultTextDefault: colorPalettePrimary.red600,
106
- actionDangerDefaultTextHover: colorPalettePrimary.red700,
107
- actionDangerDefaultTextPress: colorPalettePrimary.red800,
108
- actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue800).alpha(0).hex(),
109
- actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),
110
- actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),
111
- actionDefaultBorderDefault: colorPalettePrimary.grey300,
112
- actionDefaultBorderFocus: colorPalettePrimary.blue600,
113
- actionDefaultBorderHover: colorPalettePrimary.blue700,
114
- actionDefaultBorderPress: colorPalettePrimary.blue800,
115
- actionDefaultTextDefault: colorPalettePrimary.grey800,
116
- actionDefaultTextHover: colorPalettePrimary.blue700,
117
- actionDefaultTextPress: colorPalettePrimary.blue800,
118
- actionDisabledBackground: colorPalettePrimary.grey200,
119
- actionDisabledText: colorPalettePrimary.grey400,
120
- actionPrimaryBackgroundDefault: colorPalettePrimary.blue600,
121
- actionPrimaryBackgroundHover: colorPalettePrimary.blue700,
122
- actionPrimaryBackgroundPress: colorPalettePrimary.blue800,
123
- actionPrimaryTextDefault: colorPalettePrimary.white,
124
- actionPrimaryTextHover: colorPalettePrimary.white,
125
- actionPrimaryTextPress: colorPalettePrimary.white,
126
- actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue600).alpha(0).hex(),
127
- actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),
128
- actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),
129
- actionTertiaryTextDefault: colorPalettePrimary.blue600,
130
- actionTertiaryTextHover: colorPalettePrimary.blue700,
131
- actionTertiaryTextPress: colorPalettePrimary.blue800,
132
- backgroundDanger: chroma(colorPalettePrimary.red100).alpha(0.08).hex(),
133
- backgroundSecondary: colorPalettePrimary.grey100,
134
- backgroundWarning: chroma(colorPalettePrimary.yellow100).alpha(0.08).hex(),
135
- border: colorPalettePrimary.grey300,
136
- borderDecorative: colorPalettePrimary.grey300,
137
- textPrimary: colorPalettePrimary.grey800,
138
- textSecondary: colorPalettePrimary.grey600,
139
- textPlaceholder: colorPalettePrimary.grey400,
140
- textValidationDanger: colorPalettePrimary.red600,
141
- textValidationSuccess: colorPalettePrimary.green600,
142
- textValidationWarning: colorPalettePrimary.yellow600,
143
- overlayOverlay: chroma(colorPalettePrimary.grey100).alpha(0.72).hex(),
144
- // Tags
145
- tagDefault: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
146
- tagBrown: colorPaletteSecondary.brown,
147
- tagCoral: colorPaletteSecondary.coral,
148
- tagCharcoal: colorPalettePrimary.grey600,
149
- tagIndigo: colorPaletteSecondary.indigo,
150
- tagLemon: colorPaletteSecondary.lemon,
151
- tagLime: colorPaletteSecondary.lime,
152
- tagPink: colorPaletteSecondary.pink,
153
- tagPurple: colorPaletteSecondary.purple,
154
- tagTeal: colorPaletteSecondary.teal,
155
- tagTurquoise: colorPaletteSecondary.turquoise,
156
- tagText: colorPalettePrimary.white,
157
- tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
158
- tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
159
- tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
160
- tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
161
- // Typography
162
- typographyCodeBg: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
163
- // Table
164
- tableSeparatorColor: colorPalettePrimary.grey200,
165
- tableRowHover: chroma(colorPalettePrimary.grey600).alpha(0.04).hex(),
166
- tooltipBackgroundTooltip: colorPalettePrimary.grey800,
167
- ...unstableColors
168
- };
169
- const darkColorList = {
170
- actionDangerPrimaryBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
171
- actionDangerPrimaryBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
172
- actionDangerPrimaryBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
173
- actionDangerDefaultBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0).hex(),
174
- actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.08).hex(),
175
- actionDangerDefaultBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.16).hex(),
176
- actionDangerDefaultBorderDefault: colorPalettePrimary.red400,
177
- actionDangerDefaultBorderHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
178
- actionDangerDefaultBorderPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
179
- actionDangerDefaultTextDefault: colorPalettePrimary.red400,
180
- actionDangerDefaultTextHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
181
- actionDangerDefaultTextPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
182
- actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
183
- actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
184
- actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
185
- actionDefaultBorderDefault: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
186
- actionDefaultBorderFocus: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
187
- actionDefaultBorderHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
188
- actionDefaultBorderPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
189
- actionDefaultTextDefault: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
190
- actionDefaultTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
191
- actionDefaultTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
192
- actionDisabledBackground: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
193
- actionDisabledText: chroma(colorPalettePrimary.white).alpha(0.4).hex(),
194
- actionPrimaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
195
- actionPrimaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
196
- actionPrimaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
197
- actionPrimaryTextDefault: colorPalettePrimary.grey800,
198
- actionPrimaryTextHover: colorPalettePrimary.grey800,
199
- actionPrimaryTextPress: colorPalettePrimary.grey800,
200
- actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
201
- actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
202
- actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
203
- actionTertiaryTextDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
204
- actionTertiaryTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
205
- actionTertiaryTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
206
- backgroundPrimary: colorPalettePrimary.grey800,
207
- backgroundSecondary: chroma(colorPalettePrimary.white).alpha(0.04).hex(),
208
- border: chroma(colorPalettePrimary.white).alpha(0.48).hex(),
209
- borderDecorative: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
210
- textPrimary: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
211
- textSecondary: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
212
- textPlaceholder: chroma(colorPalettePrimary.grey400).alpha(0.84).hex(),
213
- textValidationDanger: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
214
- textValidationSuccess: chroma(colorPalettePrimary.green400).alpha(0.84).hex(),
215
- textValidationWarning: chroma(colorPalettePrimary.yellow400).alpha(0.84).hex(),
216
- overlayOverlay: chroma(colorPalettePrimary.grey800).alpha(0.72).hex(),
217
- // Tags
218
- tagDefault: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
219
- tagBrown: chroma(colorPaletteSecondary.brown).alpha(0.84).hex(),
220
- tagCoral: chroma(colorPaletteSecondary.coral).alpha(0.84).hex(),
221
- tagCharcoal: chroma(colorPalettePrimary.grey600).alpha(0.84).hex(),
222
- tagIndigo: chroma(colorPaletteSecondary.indigo).alpha(0.84).hex(),
223
- tagLemon: chroma(colorPaletteSecondary.lemon).alpha(0.84).hex(),
224
- tagLime: chroma(colorPaletteSecondary.lime).alpha(0.84).hex(),
225
- tagPink: chroma(colorPaletteSecondary.pink).alpha(0.84).hex(),
226
- tagPurple: chroma(colorPaletteSecondary.purple).alpha(0.84).hex(),
227
- tagTeal: chroma(colorPaletteSecondary.teal).alpha(0.84).hex(),
228
- tagTurquoise: chroma(colorPaletteSecondary.turquoise).alpha(0.84).hex(),
229
- tagText: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
230
- tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
231
- tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
232
- tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
233
- tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
234
- // Typography
235
- typographyCodeBg: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
236
- // Table
237
- tableSeparatorColor: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
238
- tableRowHover: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
239
- tooltipBackgroundTooltip: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
240
- // Missing in list
241
- backgroundDanger: 'rgba(200,45,76,0.08)',
242
- backgroundWarning: 'rgba(222,121,33,0.08)',
243
- // Missing in light list
244
- // "background-validation-danger": "rgba(229,110,134,0)",
245
- // "background-validation-warning": "rgba(252,234,202,0)",
246
- ...unstableColors
247
- };
248
-
249
- const darkColors = {
250
- ...darkColorList,
251
- ...colorPalettePrimary,
252
- ...colorPaletteSecondary
253
- };
254
- const lightColors = {
255
- ...lightColorList,
256
- ...colorPalettePrimary,
257
- ...colorPaletteSecondary
258
- };
259
- function getSemanticColors(theme) {
260
- switch (theme) {
261
- case 'dark':
262
- return {
263
- ...darkColors
264
- };
265
- default:
266
- return {
267
- ...lightColors
268
- };
269
- }
270
- }
271
-
272
- // TODO (FEINF-1674): Remove when removing USE_NEW_RADIO_STYLES
273
- /*
274
- Colors that need to be replaced by semantic colors.
275
- */
276
- const deprecatedColors = {
277
- // Radio Colors
278
- radioInteractiveAvailable: colorPalettePrimary.primary,
279
- radioInteractiveHover: '#186099',
280
- radioInteractivePress: '#0D4F85',
281
- radioDisabled: '#A2AEB8',
282
- radioDefaultBorder: '#64727D',
283
- radioDefaultBackground: '#FFFFFF',
284
- radioInteractiveHoverSecondary: 'rgba(34, 115, 181, 0.08)',
285
- // Fade of Interactive Available
286
- radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)' // Fade of Interactive Available
287
- };
288
-
289
- function getColors(theme) {
290
- return {
291
- ...deprecatedColors,
292
- ...getSemanticColors(theme)
293
- };
294
- }
295
-
296
- // eslint-disable-next-line import/no-anonymous-default-export
297
- var antdVars = {
298
- // IMPORTANT: Do not read this directly from components. Use `React.useContext`.
299
- 'ant-prefix': 'du-bois'
300
- };
301
-
302
- const DEFAULT_SPACING_UNIT = 8;
303
- const MODAL_PADDING = 40;
304
- const spacing = {
305
- xs: DEFAULT_SPACING_UNIT / 2,
306
- sm: DEFAULT_SPACING_UNIT,
307
- md: DEFAULT_SPACING_UNIT * 2,
308
- lg: DEFAULT_SPACING_UNIT * 3
309
- };
310
-
311
- // Less variables that are used by AntD
312
- ({
313
- defaultPaddingLg: spacing.lg,
314
- defaultPaddingMd: spacing.md,
315
- defaultPaddingSm: spacing.sm,
316
- defaultPaddingXs: spacing.sm,
317
- defaultPaddingXss: spacing.xs,
318
- paddingLg: spacing.md,
319
- // TODO: Check if there is a better alternative with team
320
- paddingMd: spacing.sm,
321
- paddingSm: spacing.sm,
322
- paddingXs: spacing.xs,
323
- paddingXss: 0,
324
- marginSm: 12,
325
- marginLg: spacing.lg,
326
- // Button
327
- btnPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 2,
328
- btnPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 2,
329
- btnPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 2,
330
- // Input
331
- inputPaddingHorizontal: DEFAULT_SPACING_UNIT * 1.5,
332
- inputPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 1.5,
333
- inputPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 1.5,
334
- inputPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 1.5,
335
- inputPaddingVertical: spacing.xs + 1,
336
- inputPaddingVerticalBase: spacing.xs + 1,
337
- inputPaddingVerticalSm: spacing.xs + 1,
338
- inputPaddingVerticalLg: spacing.xs + 1,
339
- // Modal
340
- modalPadding: MODAL_PADDING,
341
- modalLessPadding: MODAL_PADDING - 20,
342
- modalHeaderPadding: "".concat(MODAL_PADDING, "px ").concat(MODAL_PADDING, "px ").concat(MODAL_PADDING - 20, "px"),
343
- modalHeaderCloseSize: MODAL_PADDING * 2 + 22,
344
- modalHeaderBorderWidth: 0,
345
- modalBodyPadding: "0 ".concat(MODAL_PADDING, "px"),
346
- modalFooterPaddingVertical: 0,
347
- modalFooterPaddingHorizontal: 0,
348
- modalFooterBorderWidth: 0,
349
- // Switch
350
- switchPadding: 0,
351
- switchHeight: 16,
352
- switchMinWidth: 28,
353
- switchPinSize: 14
354
- });
355
- var spacing$1 = spacing;
356
-
357
- const heightBase = 40;
358
- const borderWidth = 1;
359
- const antdGeneralVariables = {
360
- classnamePrefix: antdVars['ant-prefix'],
361
- iconfontCssPrefix: 'anticon',
362
- borderRadiusBase: 4,
363
- borderWidth: borderWidth,
364
- heightSm: 32,
365
- heightBase: heightBase,
366
- iconSize: 24,
367
- // TODO (FEINF-1545): Update with icon overhaul to 16px
368
- iconFontSize: 13,
369
- iconFontSizeNew: 16,
370
- buttonHeight: heightBase,
371
- // Height available within button (for label and icon). Same for middle and small buttons.
372
- buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
373
- };
374
- var generalVariables = antdGeneralVariables;
375
-
376
- const FONT_SIZE_BASE = 13;
377
-
378
- // Less variables that are used by AntD
379
- const antdTypography = {
380
- fontSizeSm: 12,
381
- fontSizeBase: FONT_SIZE_BASE,
382
- fontSizeMd: FONT_SIZE_BASE,
383
- fontSizeLg: 18,
384
- fontSizeXl: 22,
385
- fontSizeXxl: 32,
386
- lineHeightSm: '16px',
387
- lineHeightBase: '20px',
388
- lineHeightMd: '20px',
389
- lineHeightLg: '24px',
390
- lineHeightXl: '28px',
391
- lineHeightXxl: '40px',
392
- typographyBoldFontWeight: 600
393
- };
394
-
395
- // eslint-disable-next-line import/no-anonymous-default-export
396
- var typography = {
397
- ...antdTypography
398
- };
399
-
400
- // TODO(giles): fix this
401
- // eslint-disable-next-line import/no-named-as-default
402
-
403
- const defaultOptions = {
404
- enableAnimation: false,
405
- zIndexBase: 1000
406
- };
407
-
408
- // Function to get variables for a certain theme.
409
- // End users should use useDesignSystemTheme instead.
410
- function getTheme(themeName) {
411
- let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
412
- return {
413
- colors: getColors(themeName),
414
- spacing: spacing$1,
415
- general: generalVariables,
416
- typography,
417
- borders: borders$1,
418
- themeName,
419
- options
420
- };
421
- }
422
-
423
- const themeNameToAntdName = {
424
- dark: 'dark',
425
- default: 'light'
426
- };
427
- function getClassNamePrefix(theme) {
428
- const antdThemeName = themeNameToAntdName[theme.themeName];
429
- return "".concat(theme.general.classnamePrefix, "-").concat(antdThemeName);
430
- }
431
- function getPrefixedClassNameFromTheme(theme, className) {
432
- return [getClassNamePrefix(theme), className].filter(Boolean).join('-');
433
- }
434
- function useDesignSystemTheme() {
435
- const emotionTheme = useTheme();
436
- // Graceful fallback to default theme in case a test or developer forgot context.
437
- const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme('default');
438
- return {
439
- theme: theme,
440
- classNamePrefix: getClassNamePrefix(theme),
441
- getPrefixedClassName: className => getPrefixedClassNameFromTheme(theme, className)
442
- };
443
- }
444
- // This is a simple typed HOC wrapper around the useDesignSystemTheme hook, for use in older react components.
445
- function WithDesignSystemThemeHoc(Component) {
446
- return function WrappedWithDesignSystemTheme(props) {
447
- const themeValues = useDesignSystemTheme();
448
- return jsx(Component, {
449
- ...props,
450
- designSystemThemeApi: themeValues
451
- });
452
- };
453
- }
454
-
455
- const DuboisContextDefaults = {
456
- enableAnimation: false,
457
- theme: 'default',
458
- // Prefer to use useDesignSystemTheme.getPrefixedClassName instead
459
- getPrefixCls: suffix => suffix ? "du-bois-".concat(suffix) : 'du-bois',
460
- flags: {}
461
- };
462
- const DesignSystemContext = /*#__PURE__*/createContext(DuboisContextDefaults);
463
- const DU_BOIS_ENABLE_ANIMATION_CLASSNAME = 'du-bois-enable-animation';
464
- function getAnimationCss(enableAnimation) {
465
- const disableAnimationCss = {
466
- animationDuration: '0s !important',
467
- transition: 'none !important'
468
- };
469
- return enableAnimation ? {} : {
470
- // Apply to the current element
471
- ...disableAnimationCss,
472
- '&::before': disableAnimationCss,
473
- '&::after': disableAnimationCss,
474
- // Also apply to all child elements with a class that starts with our prefix
475
- ["[class*=du-bois]:not(.".concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME, ", .").concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME, " *)")]: {
476
- ...disableAnimationCss,
477
- // Also target any pseudo-elements associated with those elements, since these can also be animated.
478
- '&::before': disableAnimationCss,
479
- '&::after': disableAnimationCss
480
- }
481
- };
482
- }
483
- const DesignSystemProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
484
- const AntDConfigProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
485
- const DesignSystemProvider = _ref => {
486
- let {
487
- children,
488
- theme: themeName,
489
- enableAnimation = false,
490
- zIndexBase = 1000,
491
- getPopupContainer,
492
- flags = {}
493
- } = _ref;
494
- const theme = useMemo(() => getTheme(themeName || 'default', {
495
- enableAnimation,
496
- zIndexBase
497
- }),
498
- // TODO: revisit this
499
- // eslint-disable-next-line react-hooks/exhaustive-deps
500
- [themeName, zIndexBase]);
501
- const providerPropsContext = useMemo(() => ({
502
- theme: themeName,
503
- enableAnimation,
504
- zIndexBase,
505
- getPopupContainer,
506
- flags
507
- }), [themeName, enableAnimation, zIndexBase, getPopupContainer, flags]);
508
- const classNamePrefix = getClassNamePrefix(theme);
509
- const value = useMemo(() => {
510
- return {
511
- enableAnimation,
512
- theme: theme.themeName,
513
- getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),
514
- getPopupContainer,
515
- flags
516
- };
517
- }, [enableAnimation, theme, getPopupContainer, flags]);
518
- useEffect(() => {
519
- return () => {
520
- // when the design system context is unmounted, make sure the notification cache is also cleaned up
521
- notification.destroy();
522
- };
523
- }, []);
524
- return jsx(DesignSystemProviderPropsContext.Provider, {
525
- value: providerPropsContext,
526
- children: jsx(ThemeProvider, {
527
- theme: theme,
528
- children: jsx(AntDConfigProviderPropsContext.Provider, {
529
- value: {
530
- prefixCls: classNamePrefix,
531
- getPopupContainer
532
- },
533
- children: jsx(DesignSystemContext.Provider, {
534
- value: value,
535
- children: children
536
- })
537
- })
538
- })
539
- });
540
- };
541
- const ApplyDesignSystemContextOverrides = _ref2 => {
542
- let {
543
- theme,
544
- enableAnimation,
545
- zIndexBase,
546
- getPopupContainer,
547
- flags,
548
- children
549
- } = _ref2;
550
- const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
551
- if (parentDesignSystemProviderProps === null) {
552
- throw new Error("ApplyDesignSystemContextOverrides cannot be used standalone - DesignSystemProvider must exist in the React context");
553
- }
554
- const newProps = useMemo(() => ({
555
- ...parentDesignSystemProviderProps,
556
- theme: theme !== null && theme !== void 0 ? theme : parentDesignSystemProviderProps.theme,
557
- enableAnimation: enableAnimation !== null && enableAnimation !== void 0 ? enableAnimation : parentDesignSystemProviderProps.enableAnimation,
558
- zIndexBase: zIndexBase !== null && zIndexBase !== void 0 ? zIndexBase : parentDesignSystemProviderProps.zIndexBase,
559
- getPopupContainer: getPopupContainer !== null && getPopupContainer !== void 0 ? getPopupContainer : parentDesignSystemProviderProps.getPopupContainer,
560
- flags: {
561
- ...parentDesignSystemProviderProps.flags,
562
- ...flags
563
- }
564
- }), [parentDesignSystemProviderProps, theme, enableAnimation, zIndexBase, getPopupContainer, flags]);
565
- return jsx(DesignSystemProvider, {
566
- ...newProps,
567
- children: children
568
- });
569
- };
570
-
571
- // This is a more-specific version of `ApplyDesignSystemContextOverrides` that only allows overriding the flags.
572
- const ApplyDesignSystemFlags = _ref3 => {
573
- let {
574
- flags,
575
- children
576
- } = _ref3;
577
- const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
578
- if (parentDesignSystemProviderProps === null) {
579
- throw new Error("ApplyDesignSystemFlags cannot be used standalone - DesignSystemProvider must exist in the React context");
580
- }
581
- const newProps = useMemo(() => ({
582
- ...parentDesignSystemProviderProps,
583
- flags: {
584
- ...parentDesignSystemProviderProps.flags,
585
- ...flags
586
- }
587
- }), [parentDesignSystemProviderProps, flags]);
588
- return jsx(DesignSystemProvider, {
589
- ...newProps,
590
- children: children
591
- });
592
- };
593
- const DesignSystemAntDConfigProvider = _ref4 => {
594
- let {
595
- children
596
- } = _ref4;
597
- const antdContext = useAntDConfigProviderContext();
598
- return jsx(ConfigProvider, {
599
- ...antdContext,
600
- children: children
601
- });
602
- };
603
- const useAntDConfigProviderContext = () => {
604
- var _useContext;
605
- return (_useContext = useContext(AntDConfigProviderPropsContext)) !== null && _useContext !== void 0 ? _useContext : {
606
- prefixCls: undefined
607
- };
608
- };
609
-
610
- /**
611
- * When using AntD components inside Design System wrapper components (e.g. Modal, Collapse etc),
612
- * we don't want Design System's prefix class to override them.
613
- *
614
- * Since all Design System's components have are wrapped with DesignSystemAntDConfigProvider,
615
- * this won't affect their own prefixCls, but just allow nested antd components to keep their ant prefix.
616
- */
617
- const RestoreAntDDefaultClsPrefix = _ref5 => {
618
- let {
619
- children
620
- } = _ref5;
621
- return jsx(ConfigProvider, {
622
- prefixCls: "ant",
623
- children: children
624
- });
625
- };
626
-
627
- function useDesignSystemContext() {
628
- return useContext(DesignSystemContext);
629
- }
630
-
631
- function useDesignSystemFlags() {
632
- const context = useDesignSystemContext();
633
- return context.flags;
634
- }
635
-
636
- const getIconEmotionStyles = (theme, useNewIcons) => {
637
- return /*#__PURE__*/css({
638
- ...(useNewIcons && {
639
- fontSize: theme.general.iconFontSizeNew
640
- })
641
- }, process.env.NODE_ENV === "production" ? "" : ";label:getIconEmotionStyles;");
642
- };
643
- const getIconValidationColor = (theme, color) => {
644
- switch (color) {
645
- case 'success':
646
- return theme.colors.textValidationSuccess;
647
- case 'warning':
648
- return theme.colors.textValidationWarning;
649
- case 'danger':
650
- return theme.colors.textValidationDanger;
651
- default:
652
- return color;
653
- }
654
- };
655
- const Icon = props => {
656
- const {
657
- component: Component,
658
- dangerouslySetAntdProps,
659
- color,
660
- style,
661
- ...otherProps
662
- } = props;
663
- const {
664
- theme
665
- } = useDesignSystemTheme();
666
- const {
667
- USE_NEW_ICONS
668
- } = useDesignSystemFlags();
669
- const MemoizedComponent = useMemo(() => Component ? _ref => {
670
- let {
671
- fill,
672
- ...iconProps
673
- } = _ref;
674
- return (
675
- // We don't rely on top-level fills for our colors. Fills are specified
676
- // with "currentColor" on children of the top-most svg.
677
- jsx(Component, {
678
- fill: "none",
679
- ...iconProps
680
- })
681
- );
682
- } : undefined, [Component]);
683
- return jsx(DesignSystemAntDConfigProvider, {
684
- children: jsx(AntDIcon, {
685
- css: getIconEmotionStyles(theme, USE_NEW_ICONS),
686
- component: MemoizedComponent,
687
- style: {
688
- color: getIconValidationColor(theme, color),
689
- ...style
690
- },
691
- ...otherProps,
692
- ...dangerouslySetAntdProps
693
- })
694
- });
695
- };
696
-
697
- function SvgNewWindowIconV1(props) {
698
- return jsx("svg", {
699
- width: "1em",
700
- height: "1em",
701
- viewBox: "0 0 24 24",
702
- fill: "none",
703
- xmlns: "http://www.w3.org/2000/svg",
704
- ...props,
705
- children: jsx("path", {
706
- fillRule: "evenodd",
707
- clipRule: "evenodd",
708
- d: "M5 18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-5c0-.55.45-1 1-1s1 .45 1 1v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5a2 2 0 012-2h6c.55 0 1 .45 1 1s-.45 1-1 1H6c-.55 0-1 .45-1 1v12zM15 5c-.55 0-1-.45-1-1s.45-1 1-1h5c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1s-1-.45-1-1V6.41l-9.13 9.13a.996.996 0 11-1.41-1.41L17.59 5H15z",
709
- fill: "currentColor"
710
- })
711
- });
712
- }
713
- function SvgNewWindowIconV2(props) {
714
- return jsxs("svg", {
715
- width: "1em",
716
- height: "1em",
717
- viewBox: "0 0 16 16",
718
- fill: "none",
719
- xmlns: "http://www.w3.org/2000/svg",
720
- ...props,
721
- children: [jsx("path", {
722
- d: "M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10V1z",
723
- fill: "currentColor"
724
- }), jsx("path", {
725
- d: "M1 2.75A.75.75 0 011.75 2H8v1.5H2.5v10h10V8H14v6.25a.75.75 0 01-.75.75H1.75a.75.75 0 01-.75-.75V2.75z",
726
- fill: "currentColor"
727
- })]
728
- });
729
- }
730
- function NewWindowIcon(props) {
731
- const {
732
- USE_NEW_ICONS
733
- } = useDesignSystemFlags();
734
- const component = USE_NEW_ICONS ? SvgNewWindowIconV2 : SvgNewWindowIconV1;
735
- return jsx(Icon, {
736
- ...props,
737
- component: component
738
- });
739
- }
740
-
741
- function SvgSortAscendingIcon(props) {
742
- return jsx("svg", {
743
- width: "1em",
744
- height: "1em",
745
- viewBox: "0 0 16 16",
746
- fill: "none",
747
- xmlns: "http://www.w3.org/2000/svg",
748
- ...props,
749
- children: jsx("path", {
750
- d: "M11.5.94l4.03 4.03-1.06 1.06-2.22-2.22V10h-1.5V3.81L8.53 6.03 7.47 4.97 11.5.94zM1 4.5h4V6H1V4.5zM1 12.5h10V14H1v-1.5zM8 8.5H1V10h7V8.5z",
751
- fill: "currentColor"
752
- })
753
- });
754
- }
755
- function SortAscendingIcon(props) {
756
- return jsx(Icon, {
757
- ...props,
758
- component: SvgSortAscendingIcon
759
- });
760
- }
761
-
762
- function SvgSortDescendingIcon(props) {
763
- return jsx("svg", {
764
- width: "1em",
765
- height: "1em",
766
- viewBox: "0 0 16 16",
767
- fill: "none",
768
- xmlns: "http://www.w3.org/2000/svg",
769
- ...props,
770
- children: jsx("path", {
771
- fillRule: "evenodd",
772
- clipRule: "evenodd",
773
- d: "M1 3.5h10V2H1v1.5zm0 8h4V10H1v1.5zm7-4H1V6h7v1.5zm3.5 7.56l4.03-4.03-1.06-1.06-2.22 2.22V6h-1.5v6.19L8.53 9.97l-1.06 1.06 4.03 4.03z",
774
- fill: "currentColor"
775
- })
776
- });
777
- }
778
- function SortDescendingIcon(props) {
779
- return jsx(Icon, {
780
- ...props,
781
- component: SvgSortDescendingIcon
782
- });
783
- }
784
-
785
- function SvgSortUnsortedIcon(props) {
786
- return jsx("svg", {
787
- width: "1em",
788
- height: "1em",
789
- viewBox: "0 0 16 16",
790
- fill: "none",
791
- xmlns: "http://www.w3.org/2000/svg",
792
- ...props,
793
- children: jsx("path", {
794
- d: "M11.5.94L7.47 4.97l1.06 1.06 2.22-2.22v8.38L8.53 9.97l-1.06 1.06 4.03 4.03 4.03-4.03-1.06-1.06-2.22 2.22V3.81l2.22 2.22 1.06-1.06L11.5.94zM6 3.5H1V5h5V3.5zM6 11.5H1V13h5v-1.5zM1 7.5h5V9H1V7.5z",
795
- fill: "currentColor"
796
- })
797
- });
798
- }
799
- function SortUnsortedIcon(props) {
800
- return jsx(Icon, {
801
- ...props,
802
- component: SvgSortUnsortedIcon
803
- });
804
- }
805
-
806
- const ColorVars = {
807
- primary: 'textPrimary',
808
- secondary: 'textSecondary',
809
- info: 'textValidationInfo',
810
- error: 'textValidationDanger',
811
- success: 'textValidationSuccess',
812
- warning: 'textValidationWarning'
813
- };
814
-
815
- /**
816
- * Recursively appends `!important` to all CSS properties in an Emotion `CSSObject`.
817
- * Used to ensure that we always override Ant styles, without worrying about selector precedence.
818
- */
819
- function importantify(obj) {
820
- return _mapValues(obj, (value, key) => {
821
- if (_isString(value) || _isNumber(value) || _isBoolean(value)) {
822
- // Make sure we don't double-append important
823
- if (_isString(value) && _endsWith(value, '!important')) {
824
- return value;
825
- }
826
- if (_isNumber(value)) {
827
- if (unitless[key]) {
828
- return "".concat(value, "!important");
829
- }
830
- return "".concat(value, "px!important");
831
- }
832
- return "".concat(value, "!important");
833
- }
834
- if (_isNil(value)) {
835
- return value;
836
- }
837
- return importantify(value);
838
- });
839
- }
840
-
841
- /**
842
- * Returns a text color, in case of invalid/missing key and missing fallback color it will return textPrimary
843
- * @param theme
844
- * @param key - key of TypographyColor
845
- * @param fallbackColor - color to return as fallback -- used to remove tertiary check inline
846
- */
847
- function getTypographyColor(theme, key, fallbackColor) {
848
- if (theme && key && Object(theme.colors).hasOwnProperty(ColorVars[key])) {
849
- return theme.colors[ColorVars[key]];
850
- }
851
- return fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : theme.colors.textPrimary;
852
- }
853
-
854
- /**
855
- * Returns validation color based on state, has default validation colors if params are not provided
856
- * @param theme
857
- * @param validationState
858
- * @param errorColor
859
- * @param warningColor
860
- * @param successColor
861
- */
862
- function getValidationStateColor(theme, validationState) {
863
- let {
864
- errorColor,
865
- warningColor,
866
- successColor
867
- } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
868
- switch (validationState) {
869
- case 'error':
870
- return errorColor || theme.colors.actionDangerPrimaryBackgroundDefault;
871
- case 'warning':
872
- return warningColor || theme.colors.textValidationWarning;
873
- case 'success':
874
- return successColor || theme.colors.textValidationSuccess;
875
- default:
876
- return undefined;
877
- }
878
- }
879
-
880
- function getCheckboxEmotionStyles(clsPrefix, theme) {
881
- let isHorizontal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
882
- let useNewCheckboxStyles = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
883
- const classInput = ".".concat(clsPrefix, "-input");
884
- const classInner = ".".concat(clsPrefix, "-inner");
885
- const classIndeterminate = ".".concat(clsPrefix, "-indeterminate");
886
- const classChecked = ".".concat(clsPrefix, "-checked");
887
- const classDisabled = ".".concat(clsPrefix, "-disabled");
888
- const classDisabledWrapper = ".".concat(clsPrefix, "-wrapper-disabled");
889
- const classContainer = ".".concat(clsPrefix, "-group");
890
- const classWrapper = ".".concat(clsPrefix, "-wrapper");
891
- const defaultSelector = "".concat(classInput, " + ").concat(classInner);
892
- const hoverSelector = "".concat(classInput, ":hover + ").concat(classInner);
893
- const pressSelector = "".concat(classInput, ":active + ").concat(classInner);
894
- const styles = {
895
- ...(useNewCheckboxStyles && {
896
- [".".concat(clsPrefix)]: {
897
- top: 'unset',
898
- lineHeight: theme.typography.lineHeightBase
899
- },
900
- ["&".concat(classWrapper, ", ").concat(classWrapper)]: {
901
- alignItems: 'center',
902
- lineHeight: theme.typography.lineHeightBase
903
- }
904
- }),
905
- // Top level styles are for the unchecked state
906
- [classInner]: {
907
- borderColor: theme.colors.actionDefaultBorderDefault
908
- },
909
- // Layout styling
910
- ["&".concat(classContainer)]: {
911
- display: 'flex',
912
- flexDirection: 'column',
913
- rowGap: theme.spacing.sm,
914
- columnGap: 0
915
- },
916
- ...(isHorizontal && {
917
- ["&".concat(classContainer)]: {
918
- display: 'flex',
919
- flexDirection: 'row',
920
- columnGap: theme.spacing.sm,
921
- rowGap: 0,
922
- ["& > ".concat(classContainer, "-item")]: {
923
- marginRight: 0
924
- }
925
- }
926
- }),
927
- // Keyboard focus
928
- ["".concat(classInput, ":focus-visible + ").concat(classInner)]: {
929
- outlineWidth: '2px',
930
- outlineColor: theme.colors.primary,
931
- outlineOffset: '4px',
932
- outlineStyle: 'solid'
933
- },
934
- // Hover
935
- [hoverSelector]: {
936
- backgroundColor: theme.colors.actionDefaultBackgroundHover,
937
- borderColor: theme.colors.actionPrimaryBackgroundHover
938
- },
939
- // Mouse pressed
940
- [pressSelector]: {
941
- backgroundColor: theme.colors.actionDefaultBackgroundPress,
942
- borderColor: theme.colors.actionPrimaryBackgroundPress
943
- },
944
- // Checked state
945
- [classChecked]: {
946
- '&::after': {
947
- border: 'none'
948
- },
949
- [defaultSelector]: {
950
- backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
951
- borderColor: 'transparent'
952
- },
953
- // Checked hover
954
- [hoverSelector]: {
955
- backgroundColor: theme.colors.actionPrimaryBackgroundHover,
956
- borderColor: 'transparent'
957
- },
958
- // Checked and mouse pressed
959
- [pressSelector]: {
960
- backgroundColor: theme.colors.actionPrimaryBackgroundPress,
961
- borderColor: 'transparent'
962
- }
963
- },
964
- // Indeterminate
965
- [classIndeterminate]: {
966
- [classInner]: {
967
- backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
968
- borderColor: theme.colors.actionPrimaryBackgroundDefault,
969
- // The after pseudo-element is used for the check image itself
970
- '&:after': {
971
- backgroundColor: theme.colors.white,
972
- height: '3px',
973
- width: '8px',
974
- borderRadius: '4px'
975
- }
976
- },
977
- // Indeterminate hover
978
- [hoverSelector]: {
979
- backgroundColor: theme.colors.actionPrimaryBackgroundHover,
980
- borderColor: 'transparent'
981
- },
982
- // Indeterminate and mouse pressed
983
- [pressSelector]: {
984
- backgroundColor: theme.colors.actionPrimaryBackgroundPress
985
- }
986
- },
987
- // Disabled state
988
- ["&".concat(classDisabledWrapper)]: {
989
- [classDisabled]: {
990
- // Disabled Checked
991
- ["&".concat(classChecked)]: {
992
- [classInner]: {
993
- backgroundColor: theme.colors.actionDisabledBackground,
994
- borderColor: theme.colors.actionDisabledBackground
995
- },
996
- // Disabled checked hover
997
- [hoverSelector]: {
998
- backgroundColor: theme.colors.actionDisabledBackground,
999
- borderColor: theme.colors.actionDisabledBackground
1000
- }
1001
- },
1002
- // Disabled indeterminate
1003
- ["&".concat(classIndeterminate)]: {
1004
- [classInner]: {
1005
- backgroundColor: theme.colors.actionDisabledBackground,
1006
- borderColor: theme.colors.actionDisabledBackground
1007
- },
1008
- // Disabled indeterminate hover
1009
- [hoverSelector]: {
1010
- backgroundColor: theme.colors.actionDisabledBackground,
1011
- borderColor: theme.colors.actionDisabledBackground
1012
- }
1013
- },
1014
- // Disabled unchecked
1015
- [classInner]: {
1016
- backgroundColor: theme.colors.actionDisabledBackground,
1017
- borderColor: theme.colors.actionDisabledBackground,
1018
- // The after pseudo-element is used for the check image itself
1019
- '&:after': {
1020
- borderColor: theme.colors.white
1021
- }
1022
- },
1023
- // Disabled hover
1024
- [hoverSelector]: {
1025
- backgroundColor: theme.colors.actionDisabledBackground,
1026
- borderColor: theme.colors.actionDisabledBackground
1027
- },
1028
- '& + span': {
1029
- color: theme.colors.actionDisabledText
1030
- }
1031
- }
1032
- },
1033
- // Animation
1034
- ...getAnimationCss(theme.options.enableAnimation)
1035
- };
1036
- return styles;
1037
- }
1038
- const getWrapperStyle = _ref => {
1039
- let {
1040
- clsPrefix,
1041
- theme,
1042
- wrapperStyle = {},
1043
- useNewStyles
1044
- } = _ref;
1045
- const styles = {
1046
- ...(useNewStyles && {
1047
- ["&& + .".concat(clsPrefix, "-hint, && + .").concat(clsPrefix, "-form-message")]: {
1048
- paddingLeft: theme.spacing.lg,
1049
- marginTop: 0
1050
- }
1051
- }),
1052
- ...wrapperStyle
1053
- };
1054
- return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getWrapperStyle;");
1055
- };
1056
- const DuboisCheckbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
1057
- let {
1058
- isChecked,
1059
- onChange,
1060
- children,
1061
- isDisabled = false,
1062
- style,
1063
- wrapperStyle,
1064
- dangerouslySetAntdProps,
1065
- className,
1066
- ...restProps
1067
- } = _ref2;
1068
- const {
1069
- theme,
1070
- classNamePrefix,
1071
- getPrefixedClassName
1072
- } = useDesignSystemTheme();
1073
- const {
1074
- USE_NEW_CHECKBOX_STYLES
1075
- } = useDesignSystemFlags();
1076
- const clsPrefix = getPrefixedClassName('checkbox');
1077
- return jsx(DesignSystemAntDConfigProvider, {
1078
- children: jsx("div", {
1079
- className: classnames(className, "".concat(clsPrefix, "-container")),
1080
- css: getWrapperStyle({
1081
- clsPrefix: classNamePrefix,
1082
- theme,
1083
- wrapperStyle,
1084
- useNewStyles: USE_NEW_CHECKBOX_STYLES
1085
- }),
1086
- children: jsx(Checkbox$1, {
1087
- checked: isChecked === null ? undefined : isChecked,
1088
- ref: ref,
1089
- onChange: onChange ? event => {
1090
- onChange(event.target.checked, event);
1091
- } : undefined,
1092
- disabled: isDisabled,
1093
- indeterminate: isChecked === null
1094
- // Individual checkboxes don't depend on isHorizontal flag, orientation and spacing is handled by end users
1095
- ,
1096
- css: /*#__PURE__*/css(importantify(getCheckboxEmotionStyles(clsPrefix, theme, false, USE_NEW_CHECKBOX_STYLES)), process.env.NODE_ENV === "production" ? "" : ";label:DuboisCheckbox;"),
1097
- style: style,
1098
- "aria-checked": isChecked === null ? 'mixed' : isChecked,
1099
- ...restProps,
1100
- ...dangerouslySetAntdProps,
1101
- children: children
1102
- })
1103
- })
1104
- });
1105
- });
1106
- const CheckboxGroup = /*#__PURE__*/forwardRef(function CheckboxGroup(_ref3, ref) {
1107
- let {
1108
- layout = 'vertical',
1109
- ...props
1110
- } = _ref3;
1111
- const {
1112
- theme,
1113
- getPrefixedClassName
1114
- } = useDesignSystemTheme();
1115
- const clsPrefix = getPrefixedClassName('checkbox');
1116
- const {
1117
- USE_NEW_CHECKBOX_STYLES
1118
- } = useDesignSystemFlags();
1119
- return jsx(DesignSystemAntDConfigProvider, {
1120
- children: jsx(Checkbox$1.Group, {
1121
- ref: ref,
1122
- ...props,
1123
- css: getCheckboxEmotionStyles(clsPrefix, theme, layout === 'horizontal', USE_NEW_CHECKBOX_STYLES)
1124
- })
1125
- });
1126
- });
1127
- const CheckboxNamespace = /* #__PURE__ */Object.assign(DuboisCheckbox, {
1128
- Group: CheckboxGroup
1129
- });
1130
- const Checkbox = CheckboxNamespace;
1131
-
1132
- // TODO: I'm doing this to support storybook's docgen;
1133
- // We should remove this once we have a better storybook integration,
1134
- // since these will be exposed in the library's exports.
1135
- const __INTERNAL_DO_NOT_USE__Group = CheckboxGroup;
1136
-
1137
- const getLinkStyles = (theme, clsPrefix, useNewIcons) => {
1138
- const classTypography = ".".concat(clsPrefix, "-typography");
1139
- const styles = {
1140
- ["&".concat(classTypography, ", &").concat(classTypography, ":focus")]: {
1141
- color: theme.colors.actionTertiaryTextDefault
1142
- },
1143
- ["&".concat(classTypography, ":hover, &").concat(classTypography, ":hover .anticon")]: {
1144
- color: theme.colors.actionTertiaryTextHover,
1145
- textDecoration: 'underline'
1146
- },
1147
- ["&".concat(classTypography, ":active, &").concat(classTypography, ":active .anticon")]: {
1148
- color: theme.colors.actionTertiaryTextPress,
1149
- textDecoration: 'underline'
1150
- },
1151
- ["&".concat(classTypography, ":focus-visible")]: {
1152
- textDecoration: 'underline'
1153
- },
1154
- ...(useNewIcons && {
1155
- '.anticon': {
1156
- fontSize: 12
1157
- }
1158
- })
1159
- };
1160
- return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
1161
- };
1162
- const getEllipsisNewTabLinkStyles = () => {
1163
- const styles = {
1164
- paddingRight: 'calc(2px + 1em)',
1165
- // 1em for icon
1166
- position: 'relative'
1167
- };
1168
- return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
1169
- };
1170
- const getIconStyles = theme => {
1171
- const styles = {
1172
- marginLeft: 2,
1173
- color: theme.colors.actionTertiaryTextDefault
1174
- };
1175
- return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
1176
- };
1177
- const getEllipsisIconStyles = useNewIcons => {
1178
- const styles = {
1179
- position: 'absolute',
1180
- right: 0,
1181
- bottom: 0,
1182
- top: 0,
1183
- display: 'flex',
1184
- alignItems: 'center',
1185
- ...(useNewIcons && {
1186
- fontSize: 12
1187
- })
1188
- };
1189
- return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
1190
- };
1191
- function Link(_ref) {
1192
- let {
1193
- dangerouslySetAntdProps,
1194
- ...props
1195
- } = _ref;
1196
- const {
1197
- children,
1198
- openInNewTab,
1199
- ...restProps
1200
- } = props;
1201
- const {
1202
- theme,
1203
- classNamePrefix
1204
- } = useDesignSystemTheme();
1205
- const {
1206
- USE_NEW_ICONS: useNewIcons
1207
- } = useDesignSystemFlags();
1208
- const newTabProps = {
1209
- rel: 'noopener noreferrer',
1210
- target: '_blank'
1211
- };
1212
- const linkProps = openInNewTab ? {
1213
- ...restProps,
1214
- ...newTabProps
1215
- } : {
1216
- ...restProps
1217
- };
1218
- const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix, useNewIcons), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix, useNewIcons);
1219
- const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
1220
- return jsx(DesignSystemAntDConfigProvider, {
1221
- children: jsxs(Typography$1.Link, {
1222
- css: linkStyles,
1223
- ...linkProps,
1224
- ...dangerouslySetAntdProps,
1225
- children: [children, openInNewTab ? jsx(NewWindowIcon, {
1226
- css: iconStyles,
1227
- ...newTabProps
1228
- }) : null]
1229
- })
1230
- });
1231
- }
1232
-
1233
- const {
1234
- Paragraph: AntDParagraph
1235
- } = Typography$1;
1236
- function getParagraphEmotionStyles(theme, props) {
1237
- return /*#__PURE__*/css({
1238
- '&&': {
1239
- fontSize: theme.typography.fontSizeBase,
1240
- lineHeight: theme.typography.lineHeightBase,
1241
- color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
1242
- }
1243
- }, props.disabled && {
1244
- '&&': {
1245
- color: theme.colors.actionDisabledText
1246
- }
1247
- }, props.withoutMargins && {
1248
- '&&': {
1249
- marginTop: 0,
1250
- marginBottom: 0
1251
- }
1252
- }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
1253
- }
1254
- function Paragraph(userProps) {
1255
- const {
1256
- dangerouslySetAntdProps,
1257
- withoutMargins,
1258
- color,
1259
- ...props
1260
- } = userProps;
1261
- const {
1262
- theme
1263
- } = useDesignSystemTheme();
1264
- return jsx(DesignSystemAntDConfigProvider, {
1265
- children: jsx(AntDParagraph, {
1266
- ...props,
1267
- className: props.className,
1268
- css: getParagraphEmotionStyles(theme, userProps),
1269
- ...dangerouslySetAntdProps
1270
- })
1271
- });
1272
- }
1273
-
1274
- const {
1275
- Text: AntDText
1276
- } = Typography$1;
1277
- function getTextEmotionStyles(theme, props) {
1278
- return /*#__PURE__*/css({
1279
- '&&': {
1280
- fontSize: theme.typography.fontSizeBase,
1281
- lineHeight: theme.typography.lineHeightBase,
1282
- color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
1283
- }
1284
- }, props.disabled && {
1285
- '&&': {
1286
- color: theme.colors.actionDisabledText
1287
- }
1288
- }, props.hint && {
1289
- '&&': {
1290
- fontSize: theme.typography.fontSizeSm,
1291
- lineHeight: theme.typography.lineHeightSm
1292
- }
1293
- }, props.bold && {
1294
- '&&': {
1295
- fontSize: theme.typography.fontSizeBase,
1296
- fontWeight: theme.typography.typographyBoldFontWeight,
1297
- lineHeight: theme.typography.lineHeightBase
1298
- }
1299
- }, props.code && {
1300
- '&& > code': {
1301
- fontSize: theme.typography.fontSizeBase,
1302
- lineHeight: theme.typography.lineHeightBase,
1303
- fontWeight: theme.typography.typographyBoldFontWeight,
1304
- background: theme.colors.typographyCodeBg,
1305
- fontFamily: 'monospace',
1306
- borderRadius: theme.borders.borderRadiusMd,
1307
- padding: '2px 4px',
1308
- border: 'unset',
1309
- margin: 0
1310
- }
1311
- }, props.size && {
1312
- '&&': (() => {
1313
- switch (props.size) {
1314
- case 'xxl':
1315
- return {
1316
- fontSize: theme.typography.fontSizeXxl,
1317
- lineHeight: theme.typography.lineHeightXxl
1318
- };
1319
- case 'xl':
1320
- return {
1321
- fontSize: theme.typography.fontSizeXl,
1322
- lineHeight: theme.typography.lineHeightXl
1323
- };
1324
- case 'lg':
1325
- return {
1326
- fontSize: theme.typography.fontSizeLg,
1327
- lineHeight: theme.typography.lineHeightLg
1328
- };
1329
- case 'sm':
1330
- return {
1331
- fontSize: theme.typography.fontSizeSm,
1332
- lineHeight: theme.typography.lineHeightSm
1333
- };
1334
- default:
1335
- return {
1336
- fontSize: theme.typography.fontSizeMd,
1337
- lineHeight: theme.typography.lineHeightMd
1338
- };
1339
- }
1340
- })()
1341
- }, props.withoutMargins && {
1342
- '&&': {
1343
- marginTop: 0,
1344
- marginBottom: 0
1345
- }
1346
- }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
1347
- }
1348
- function Text(userProps) {
1349
- // Omit props that are not supported by `antd`
1350
- const {
1351
- dangerouslySetAntdProps,
1352
- bold,
1353
- hint,
1354
- withoutMargins,
1355
- color,
1356
- ...props
1357
- } = userProps;
1358
- const {
1359
- theme
1360
- } = useDesignSystemTheme();
1361
- return jsx(DesignSystemAntDConfigProvider, {
1362
- children: jsx(AntDText, {
1363
- ...props,
1364
- className: props.className,
1365
- css: getTextEmotionStyles(theme, userProps),
1366
- ...dangerouslySetAntdProps
1367
- })
1368
- });
1369
- }
1370
-
1371
- const {
1372
- Title: AntDTitle
1373
- } = Typography$1;
1374
- function getLevelStyles(theme, props) {
1375
- switch (props.level) {
1376
- case 1:
1377
- return /*#__PURE__*/css({
1378
- '&&': {
1379
- fontSize: theme.typography.fontSizeXxl,
1380
- lineHeight: theme.typography.lineHeightXxl,
1381
- fontWeight: theme.typography.typographyBoldFontWeight
1382
- }
1383
- }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
1384
- case 2:
1385
- return /*#__PURE__*/css({
1386
- '&&': {
1387
- fontSize: theme.typography.fontSizeXl,
1388
- lineHeight: theme.typography.lineHeightXl,
1389
- fontWeight: theme.typography.typographyBoldFontWeight
1390
- }
1391
- }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
1392
- case 3:
1393
- return /*#__PURE__*/css({
1394
- '&&': {
1395
- fontSize: theme.typography.fontSizeLg,
1396
- lineHeight: theme.typography.lineHeightLg,
1397
- fontWeight: theme.typography.typographyBoldFontWeight
1398
- }
1399
- }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
1400
- case 4:
1401
- default:
1402
- return /*#__PURE__*/css({
1403
- '&&': {
1404
- fontSize: theme.typography.fontSizeMd,
1405
- lineHeight: theme.typography.lineHeightMd,
1406
- fontWeight: theme.typography.typographyBoldFontWeight
1407
- }
1408
- }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
1409
- }
1410
- }
1411
- function getTitleEmotionStyles(theme, props) {
1412
- return /*#__PURE__*/css(getLevelStyles(theme, props), {
1413
- '&&': {
1414
- color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
1415
- }
1416
- }, props.withoutMargins && {
1417
- '&&': {
1418
- marginTop: '0 !important',
1419
- // override general styling
1420
- marginBottom: '0 !important' // override general styling
1421
- }
1422
- }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
1423
- }
1424
- function Title(userProps) {
1425
- const {
1426
- dangerouslySetAntdProps,
1427
- withoutMargins,
1428
- color,
1429
- ...props
1430
- } = userProps;
1431
- const {
1432
- theme
1433
- } = useDesignSystemTheme();
1434
- return jsx(DesignSystemAntDConfigProvider, {
1435
- children: jsx(AntDTitle, {
1436
- ...props,
1437
- className: props.className,
1438
- css: getTitleEmotionStyles(theme, userProps),
1439
- ...dangerouslySetAntdProps
1440
- })
1441
- });
1442
- }
1443
-
1444
- const Typography = /* #__PURE__ */(() => {
1445
- function Typography(_ref) {
1446
- let {
1447
- dangerouslySetAntdProps,
1448
- ...props
1449
- } = _ref;
1450
- return jsx(DesignSystemAntDConfigProvider, {
1451
- children: jsx(Typography$1, {
1452
- ...props,
1453
- ...dangerouslySetAntdProps
1454
- })
1455
- });
1456
- }
1457
- Typography.Text = Text;
1458
- Typography.Title = Title;
1459
- Typography.Paragraph = Paragraph;
1460
- Typography.Link = Link;
1461
- return Typography;
1462
- })();
1463
-
1464
- export { ApplyDesignSystemContextOverrides as A, Checkbox as C, DesignSystemAntDConfigProvider as D, Icon as I, NewWindowIcon as N, RestoreAntDDefaultClsPrefix as R, SortAscendingIcon as S, Typography as T, WithDesignSystemThemeHoc as W, __INTERNAL_DO_NOT_USE__Group as _, useDesignSystemFlags as a, useDesignSystemContext as b, getValidationStateColor as c, Title as d, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as e, getWrapperStyle as f, getAnimationCss as g, DesignSystemContext as h, importantify as i, DesignSystemProvider as j, ApplyDesignSystemFlags as k, lightColorList as l, useAntDConfigProviderContext as m, SortDescendingIcon as n, SortUnsortedIcon as o, useDesignSystemTheme as u };
1465
- //# sourceMappingURL=Typography-04e40f87.js.map