@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

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 (240) hide show
  1. package/dist/components/Accordion/index.d.ts +2 -0
  2. package/dist/components/AccordionV2/accordionV2.animations.d.ts +1 -1
  3. package/dist/components/Alert/index.d.ts +1 -0
  4. package/dist/components/Avatar/index.d.ts +1 -0
  5. package/dist/components/Breadcrumb/index.d.ts +1 -0
  6. package/dist/components/Button/index.d.ts +1 -0
  7. package/dist/components/ButtonGroup/index.d.ts +1 -0
  8. package/dist/components/Card/index.d.ts +1 -0
  9. package/dist/components/CardV2/CardV2.d.ts +45 -0
  10. package/dist/components/CardV2/CardV2.utils.d.ts +14 -0
  11. package/dist/components/CardV2/CardV2Components.d.ts +8 -0
  12. package/dist/components/CardV2/CardV2Context.d.ts +14 -0
  13. package/dist/components/CardV2/CardV2Skeleton.d.ts +6 -0
  14. package/dist/components/CardV2/accessibility/CardV2AccessibilityReport.d.ts +2 -0
  15. package/dist/components/CardV2/accessibility/index.d.ts +1 -0
  16. package/dist/components/CardV2/cardV2.dark.tokens.d.ts +3 -0
  17. package/dist/components/CardV2/cardV2.light.tokens.d.ts +3 -0
  18. package/dist/components/CardV2/cardV2.tokens.d.ts +5 -0
  19. package/dist/components/CardV2/cardV2.tokens.types.d.ts +92 -0
  20. package/dist/components/CardV2/cardV2.types.d.ts +106 -0
  21. package/dist/components/CardV2/index.d.ts +5 -0
  22. package/dist/components/Charts/index.d.ts +10 -0
  23. package/dist/components/Charts/types.d.ts +2 -0
  24. package/dist/components/ChatInput/index.d.ts +1 -0
  25. package/dist/components/Checkbox/index.d.ts +1 -0
  26. package/dist/components/CodeEditor/index.d.ts +1 -0
  27. package/dist/components/DataTable/PivotTableModal/pivotModal.styled.d.ts +184 -0
  28. package/dist/components/DataTable/TableBody/types.d.ts +3 -1
  29. package/dist/components/DataTable/hooks/index.d.ts +2 -0
  30. package/dist/components/DataTable/hooks/useReducedMotion.d.ts +1 -0
  31. package/dist/components/DataTable/hooks/useRowFlip.d.ts +6 -0
  32. package/dist/components/DataTable/types.d.ts +26 -0
  33. package/dist/components/DateRangePicker/CalendarGrid.d.ts +5 -2
  34. package/dist/components/DateRangePicker/types.d.ts +3 -1
  35. package/dist/components/DateRangePicker/utils.d.ts +5 -5
  36. package/dist/components/Directory/Directory.d.ts +1 -1
  37. package/dist/components/Directory/NavItem.d.ts +1 -1
  38. package/dist/components/Directory/Section.d.ts +1 -1
  39. package/dist/components/Directory/VirtualizedDirectory.d.ts +3 -0
  40. package/dist/components/Directory/directory.tokens.d.ts +7 -0
  41. package/dist/components/Directory/types.d.ts +38 -1
  42. package/dist/components/Directory/utils.d.ts +3 -1
  43. package/dist/components/Drawer/index.d.ts +1 -0
  44. package/dist/components/Inputs/MultiValueInput/index.d.ts +1 -0
  45. package/dist/components/Inputs/NumberInput/index.d.ts +1 -0
  46. package/dist/components/Inputs/OTPInput/index.d.ts +1 -0
  47. package/dist/components/Inputs/SearchInput/index.d.ts +1 -0
  48. package/dist/components/Inputs/TextArea/index.d.ts +1 -0
  49. package/dist/components/Inputs/TextInput/index.d.ts +1 -0
  50. package/dist/components/InputsV2/TextAreaV2/utils.d.ts +2 -1
  51. package/dist/components/InputsV2/TextInputV2/utils.d.ts +2 -1
  52. package/dist/components/InputsV2/UploadV2/UploadContainerV2.d.ts +24 -0
  53. package/dist/components/InputsV2/UploadV2/UploadV2.d.ts +31 -0
  54. package/dist/components/InputsV2/UploadV2/UploadV2.dark.tokens.d.ts +3 -0
  55. package/dist/components/InputsV2/UploadV2/UploadV2.light.tokens.d.ts +3 -0
  56. package/dist/components/InputsV2/UploadV2/UploadV2.tokens.d.ts +5 -0
  57. package/dist/components/InputsV2/UploadV2/UploadV2.tokens.types.d.ts +115 -0
  58. package/dist/components/InputsV2/UploadV2/UploadV2.types.d.ts +56 -0
  59. package/dist/components/InputsV2/UploadV2/index.d.ts +3 -0
  60. package/dist/components/InputsV2/UploadV2/utils.d.ts +32 -0
  61. package/dist/components/KeyValuePair/index.d.ts +1 -0
  62. package/dist/components/Menu/Menu.d.ts +1 -1
  63. package/dist/components/Menu/index.d.ts +1 -0
  64. package/dist/components/Menu/types.d.ts +7 -0
  65. package/dist/components/Menu/utils.d.ts +10 -2
  66. package/dist/components/Modal/index.d.ts +1 -0
  67. package/dist/components/ModalV2/ModalV2.d.ts +22 -0
  68. package/dist/components/ModalV2/ModalV2Footer.d.ts +10 -0
  69. package/dist/components/ModalV2/ModalV2Header.d.ts +15 -0
  70. package/dist/components/ModalV2/ModalV2Skeleton.d.ts +4 -0
  71. package/dist/components/ModalV2/index.d.ts +4 -0
  72. package/dist/components/ModalV2/mobileModalV2.d.ts +23 -0
  73. package/dist/components/ModalV2/modalAnimationV2.d.ts +3 -0
  74. package/dist/components/ModalV2/modalV2.dark.tokens.d.ts +3 -0
  75. package/dist/components/ModalV2/modalV2.light.tokens.d.ts +3 -0
  76. package/dist/components/ModalV2/modalV2.tokens.d.ts +5 -0
  77. package/dist/components/ModalV2/modalV2.tokens.types.d.ts +91 -0
  78. package/dist/components/ModalV2/modalV2.types.d.ts +66 -0
  79. package/dist/components/MultiSelect/index.d.ts +2 -0
  80. package/dist/components/Popover/index.d.ts +1 -0
  81. package/dist/components/Primitives/Block/Block.d.ts +1 -1
  82. package/dist/components/ProgressBar/index.d.ts +1 -0
  83. package/dist/components/Radio/index.d.ts +2 -0
  84. package/dist/components/Sidebar/SidebarContent.d.ts +9 -1
  85. package/dist/components/Sidebar/index.d.ts +1 -0
  86. package/dist/components/Sidebar/types.d.ts +9 -1
  87. package/dist/components/SidebarV2/SidebarV2Panel.d.ts +10 -2
  88. package/dist/components/SidebarV2/types.d.ts +9 -1
  89. package/dist/components/SingleSelect/index.d.ts +1 -0
  90. package/dist/components/Skeleton/SkeletonCompound.d.ts +24 -33
  91. package/dist/components/Snackbar/index.d.ts +2 -0
  92. package/dist/components/StatCard/index.d.ts +1 -0
  93. package/dist/components/Stepper/index.d.ts +1 -0
  94. package/dist/components/Switch/index.d.ts +2 -0
  95. package/dist/components/Tabs/index.d.ts +1 -0
  96. package/dist/components/Tags/index.d.ts +1 -0
  97. package/dist/components/Timeline/Timeline.d.ts +13 -37
  98. package/dist/components/Tooltip/index.d.ts +1 -0
  99. package/dist/components/Topbar/index.d.ts +1 -0
  100. package/dist/components/Upload/index.d.ts +1 -0
  101. package/dist/context/ThemeContext.d.ts +6 -0
  102. package/dist/context/useComponentToken.d.ts +4 -1
  103. package/dist/main.d.ts +6 -0
  104. package/dist/main.js +45081 -41934
  105. package/dist/node-B3rrXW84.js +1023 -0
  106. package/dist/node.d.ts +2 -0
  107. package/dist/node.js +21 -18
  108. package/dist/token-engine.js +1 -1
  109. package/lib/components/Accordion/AccordionItem.tsx +2 -6
  110. package/lib/components/Accordion/index.ts +2 -0
  111. package/lib/components/AccordionV2/AccordionV2Item.tsx +1 -1
  112. package/lib/components/AccordionV2/accordionV2.animations.ts +1 -5
  113. package/lib/components/Alert/index.ts +1 -0
  114. package/lib/components/Avatar/index.ts +1 -0
  115. package/lib/components/Breadcrumb/index.ts +1 -0
  116. package/lib/components/Button/index.ts +1 -0
  117. package/lib/components/ButtonGroup/index.ts +1 -0
  118. package/lib/components/Card/index.ts +1 -0
  119. package/lib/components/CardV2/CardV2.tsx +327 -0
  120. package/lib/components/CardV2/CardV2.utils.tsx +77 -0
  121. package/lib/components/CardV2/CardV2Components.tsx +297 -0
  122. package/lib/components/CardV2/CardV2Context.tsx +18 -0
  123. package/lib/components/CardV2/CardV2Skeleton.tsx +40 -0
  124. package/lib/components/CardV2/accessibility/CardV2AccessibilityReport.ts +284 -0
  125. package/lib/components/CardV2/accessibility/index.ts +1 -0
  126. package/lib/components/CardV2/cardV2.dark.tokens.ts +177 -0
  127. package/lib/components/CardV2/cardV2.light.tokens.ts +177 -0
  128. package/lib/components/CardV2/cardV2.tokens.ts +21 -0
  129. package/lib/components/CardV2/cardV2.tokens.types.ts +94 -0
  130. package/lib/components/CardV2/cardV2.types.ts +131 -0
  131. package/lib/components/CardV2/index.ts +13 -0
  132. package/lib/components/Charts/ChartLegend.tsx +25 -5
  133. package/lib/components/Charts/Charts.tsx +10 -0
  134. package/lib/components/Charts/index.ts +10 -0
  135. package/lib/components/Charts/types.tsx +2 -0
  136. package/lib/components/ChatInput/index.tsx +1 -0
  137. package/lib/components/Checkbox/index.ts +1 -0
  138. package/lib/components/CodeEditor/index.ts +1 -0
  139. package/lib/components/DataTable/DataTable.tsx +8 -0
  140. package/lib/components/DataTable/TableBody/index.tsx +47 -11
  141. package/lib/components/DataTable/TableBody/types.ts +7 -1
  142. package/lib/components/DataTable/TableCell/index.tsx +1 -1
  143. package/lib/components/DataTable/hooks/index.ts +2 -0
  144. package/lib/components/DataTable/hooks/useReducedMotion.ts +19 -0
  145. package/lib/components/DataTable/hooks/useRowFlip.ts +170 -0
  146. package/lib/components/DataTable/types.ts +32 -0
  147. package/lib/components/DateRangePicker/CalendarGrid.tsx +36 -6
  148. package/lib/components/DateRangePicker/DateRangePicker.tsx +22 -3
  149. package/lib/components/DateRangePicker/types.ts +6 -1
  150. package/lib/components/DateRangePicker/utils.ts +123 -12
  151. package/lib/components/Directory/Directory.tsx +31 -0
  152. package/lib/components/Directory/NavItem.tsx +177 -86
  153. package/lib/components/Directory/Section.tsx +9 -0
  154. package/lib/components/Directory/VirtualizedDirectory.tsx +670 -0
  155. package/lib/components/Directory/directory.tokens.ts +21 -0
  156. package/lib/components/Directory/types.ts +43 -1
  157. package/lib/components/Directory/utils.ts +81 -1
  158. package/lib/components/Drawer/index.ts +1 -0
  159. package/lib/components/Inputs/DropdownInput/DropdownInput.tsx +6 -2
  160. package/lib/components/Inputs/MultiValueInput/index.ts +1 -0
  161. package/lib/components/Inputs/NumberInput/NumberInput.tsx +6 -2
  162. package/lib/components/Inputs/NumberInput/index.ts +1 -0
  163. package/lib/components/Inputs/OTPInput/index.ts +1 -0
  164. package/lib/components/Inputs/SearchInput/index.ts +1 -0
  165. package/lib/components/Inputs/TextArea/TextArea.tsx +4 -2
  166. package/lib/components/Inputs/TextArea/index.ts +1 -0
  167. package/lib/components/Inputs/TextInput/TextInput.tsx +6 -2
  168. package/lib/components/Inputs/TextInput/index.ts +1 -0
  169. package/lib/components/Inputs/UnitInput/UnitInput.tsx +6 -2
  170. package/lib/components/InputsV2/NumberInputV2/NumberInputV2.tsx +6 -2
  171. package/lib/components/InputsV2/TextAreaV2/TextAreaV2.tsx +2 -1
  172. package/lib/components/InputsV2/TextAreaV2/utils.ts +3 -1
  173. package/lib/components/InputsV2/TextInputV2/TextInputV2.tsx +1 -0
  174. package/lib/components/InputsV2/TextInputV2/utils.ts +6 -8
  175. package/lib/components/InputsV2/UploadV2/UploadContainerV2.tsx +470 -0
  176. package/lib/components/InputsV2/UploadV2/UploadV2.dark.tokens.ts +348 -0
  177. package/lib/components/InputsV2/UploadV2/UploadV2.light.tokens.ts +348 -0
  178. package/lib/components/InputsV2/UploadV2/UploadV2.tokens.ts +20 -0
  179. package/lib/components/InputsV2/UploadV2/UploadV2.tokens.types.ts +117 -0
  180. package/lib/components/InputsV2/UploadV2/UploadV2.tsx +336 -0
  181. package/lib/components/InputsV2/UploadV2/UploadV2.types.ts +67 -0
  182. package/lib/components/InputsV2/UploadV2/index.ts +3 -0
  183. package/lib/components/InputsV2/UploadV2/utils.ts +170 -0
  184. package/lib/components/KeyValuePair/index.ts +1 -0
  185. package/lib/components/Menu/Menu.tsx +18 -2
  186. package/lib/components/Menu/SubMenu.tsx +25 -3
  187. package/lib/components/Menu/index.ts +1 -0
  188. package/lib/components/Menu/types.tsx +14 -0
  189. package/lib/components/Menu/utils.ts +46 -3
  190. package/lib/components/Modal/index.ts +1 -0
  191. package/lib/components/ModalV2/ModalV2.tsx +269 -0
  192. package/lib/components/ModalV2/ModalV2Footer.tsx +76 -0
  193. package/lib/components/ModalV2/ModalV2Header.tsx +144 -0
  194. package/lib/components/ModalV2/ModalV2Skeleton.tsx +80 -0
  195. package/lib/components/ModalV2/index.ts +4 -0
  196. package/lib/components/ModalV2/mobileModalV2.tsx +411 -0
  197. package/lib/components/ModalV2/modalAnimationV2.tsx +19 -0
  198. package/lib/components/ModalV2/modalV2.dark.tokens.ts +183 -0
  199. package/lib/components/ModalV2/modalV2.light.tokens.ts +183 -0
  200. package/lib/components/ModalV2/modalV2.tokens.ts +21 -0
  201. package/lib/components/ModalV2/modalV2.tokens.types.ts +94 -0
  202. package/lib/components/ModalV2/modalV2.types.ts +80 -0
  203. package/lib/components/MultiSelect/MultiSelect.tsx +2 -1
  204. package/lib/components/MultiSelect/MultiSelectTrigger.tsx +2 -1
  205. package/lib/components/MultiSelect/index.ts +2 -0
  206. package/lib/components/MultiSelectV2/MultiSelectV2Trigger.tsx +4 -1
  207. package/lib/components/Popover/index.ts +1 -0
  208. package/lib/components/Primitives/Block/Block.tsx +1 -1
  209. package/lib/components/ProgressBar/index.ts +1 -0
  210. package/lib/components/Radio/index.ts +2 -0
  211. package/lib/components/Sidebar/Sidebar.tsx +38 -0
  212. package/lib/components/Sidebar/SidebarContent.tsx +25 -1
  213. package/lib/components/Sidebar/index.ts +1 -0
  214. package/lib/components/Sidebar/types.ts +13 -1
  215. package/lib/components/SidebarV2/SidebarV2.tsx +30 -0
  216. package/lib/components/SidebarV2/SidebarV2Panel.tsx +25 -1
  217. package/lib/components/SidebarV2/types.ts +9 -1
  218. package/lib/components/SingleSelect/SingleSelect.tsx +2 -1
  219. package/lib/components/SingleSelect/SingleSelectTrigger.tsx +3 -1
  220. package/lib/components/SingleSelect/index.ts +1 -0
  221. package/lib/components/SingleSelectV2/SingleSelectV2Trigger.tsx +3 -1
  222. package/lib/components/Skeleton/SkeletonCompound.tsx +45 -31
  223. package/lib/components/Snackbar/index.ts +2 -0
  224. package/lib/components/StatCard/index.ts +1 -0
  225. package/lib/components/Stepper/index.ts +1 -0
  226. package/lib/components/Switch/index.ts +2 -0
  227. package/lib/components/Tabs/index.ts +1 -0
  228. package/lib/components/Tags/index.ts +1 -0
  229. package/lib/components/Timeline/Timeline.tsx +9 -1
  230. package/lib/components/Tooltip/index.ts +1 -0
  231. package/lib/components/Topbar/index.ts +1 -0
  232. package/lib/components/Upload/index.ts +1 -0
  233. package/lib/context/ThemeContext.tsx +16 -0
  234. package/lib/context/initComponentTokens.ts +11 -0
  235. package/lib/context/useComponentToken.ts +15 -1
  236. package/lib/hooks/useResponsiveTokens.ts +63 -0
  237. package/lib/main.ts +16 -0
  238. package/lib/node.ts +2 -0
  239. package/package.json +1 -1
  240. /package/dist/{node-CovJEwot.js → breadcrumbV2.tokens-CovJEwot.js} +0 -0
package/lib/components/InputsV2/UploadV2/UploadV2.dark.tokens.ts ADDED
@@ -0,0 +1,348 @@
1
+ import { FoundationTokenType } from '../../../tokens/theme.token'
2
+ import type { ResponsiveUploadV2Tokens } from './UploadV2.tokens.types'
3
+ import { UploadDragState, UploadState } from './UploadV2.types'
4
+
5
+ export const getUploadV2DarkTokens = (
6
+ foundationTokens: FoundationTokenType
7
+ ): ResponsiveUploadV2Tokens => {
8
+ return {
9
+ sm: {
10
+ gap: foundationTokens.unit[8],
11
+ topContainer: {
12
+ label: {
13
+ fontSize: {
14
+ sm: foundationTokens.font.fontSize[14],
15
+ md: foundationTokens.font.fontSize[14],
16
+ lg: foundationTokens.font.fontSize[14],
17
+ },
18
+ fontWeight: {
19
+ sm: foundationTokens.font.weight[500],
20
+ md: foundationTokens.font.weight[500],
21
+ lg: foundationTokens.font.weight[500],
22
+ },
23
+ color: {
24
+ default: foundationTokens.colors.gray[700],
25
+ hover: foundationTokens.colors.gray[700],
26
+ focus: foundationTokens.colors.gray[700],
27
+ disabled: foundationTokens.colors.gray[400],
28
+ error: foundationTokens.colors.red[600],
29
+ },
30
+ lineHeight: {
31
+ sm: foundationTokens.font.lineHeight[20],
32
+ md: foundationTokens.font.lineHeight[20],
33
+ lg: foundationTokens.font.lineHeight[20],
34
+ },
35
+ },
36
+ subLabel: {
37
+ fontSize: {
38
+ sm: foundationTokens.font.fontSize[14],
39
+ md: foundationTokens.font.fontSize[14],
40
+ lg: foundationTokens.font.fontSize[14],
41
+ },
42
+ fontWeight: {
43
+ sm: foundationTokens.font.weight[400],
44
+ md: foundationTokens.font.weight[400],
45
+ lg: foundationTokens.font.weight[400],
46
+ },
47
+ lineHeight: {
48
+ sm: foundationTokens.font.lineHeight[20],
49
+ md: foundationTokens.font.lineHeight[20],
50
+ lg: foundationTokens.font.lineHeight[20],
51
+ },
52
+ color: {
53
+ default: foundationTokens.colors.gray[400],
54
+ hover: foundationTokens.colors.gray[400],
55
+ focus: foundationTokens.colors.gray[400],
56
+ disabled: foundationTokens.colors.gray[300],
57
+ error: foundationTokens.colors.red[600],
58
+ },
59
+ },
60
+ helpIcon: {
61
+ width: {
62
+ sm: foundationTokens.unit[14],
63
+ md: foundationTokens.unit[14],
64
+ lg: foundationTokens.unit[14],
65
+ },
66
+ color: {
67
+ default: foundationTokens.colors.gray[400],
68
+ hover: foundationTokens.colors.gray[400],
69
+ focus: foundationTokens.colors.gray[400],
70
+ disabled: foundationTokens.colors.gray[400],
71
+ error: foundationTokens.colors.red[600],
72
+ },
73
+ },
74
+ required: {
75
+ color: foundationTokens.colors.red[600],
76
+ },
77
+ },
78
+ uploadContainer: {
79
+ gap: foundationTokens.unit[20],
80
+ paddingTop: foundationTokens.unit[40],
81
+ paddingBottom: foundationTokens.unit[40],
82
+ paddingLeft: foundationTokens.unit[40],
83
+ paddingRight: foundationTokens.unit[40],
84
+ borderRadius: foundationTokens.border.radius[12],
85
+ border: {
86
+ [UploadState.IDLE]: `1px dashed ${foundationTokens.colors.gray[200]}`,
87
+ [UploadDragState.DRAG_ENTER]: `1px dashed ${foundationTokens.colors.primary[500]}`,
88
+ [UploadDragState.DRAG_LEAVE]: `1px dashed ${foundationTokens.colors.gray[200]}`,
89
+ [UploadDragState.DRAG_OVER]: `1px dashed ${foundationTokens.colors.primary[500]}`,
90
+ [UploadDragState.DROP]: `1px dashed ${foundationTokens.colors.gray[200]}`,
91
+ [UploadState.UPLOADING]: `1px dashed ${foundationTokens.colors.gray[200]}`,
92
+ [UploadState.SUCCESS]: `1px dashed ${foundationTokens.colors.gray[200]}`,
93
+ [UploadState.ERROR]: `1px dashed ${foundationTokens.colors.red[200]}`,
94
+ [UploadState.DISABLED]: `1px dashed ${foundationTokens.colors.gray[200]}`,
95
+ },
96
+ backgroundColor: {
97
+ [UploadState.IDLE]: foundationTokens.colors.gray[900],
98
+ [UploadDragState.DRAG_ENTER]:
99
+ foundationTokens.colors.primary[50],
100
+ [UploadDragState.DRAG_LEAVE]:
101
+ foundationTokens.colors.gray[900],
102
+ [UploadDragState.DRAG_OVER]:
103
+ foundationTokens.colors.primary[50],
104
+ [UploadDragState.DROP]: foundationTokens.colors.gray[900],
105
+ [UploadState.UPLOADING]: foundationTokens.colors.gray[900],
106
+ [UploadState.SUCCESS]: foundationTokens.colors.gray[900],
107
+ [UploadState.ERROR]: foundationTokens.colors.gray[900],
108
+ [UploadState.DISABLED]: foundationTokens.colors.gray[900],
109
+ },
110
+ header: {
111
+ gap: foundationTokens.unit[4],
112
+ title: {
113
+ fontSize: foundationTokens.font.fontSize[16],
114
+ fontWeight: foundationTokens.font.weight[600],
115
+ color: foundationTokens.colors.gray[100],
116
+ },
117
+ description: {
118
+ fontSize: foundationTokens.font.fontSize[14],
119
+ fontWeight: foundationTokens.font.weight[400],
120
+ color: foundationTokens.colors.gray[400],
121
+ },
122
+ errorText: {
123
+ fontSize: foundationTokens.font.fontSize[14],
124
+ fontWeight: foundationTokens.font.weight[400],
125
+ color: foundationTokens.colors.red[600],
126
+ },
127
+ },
128
+ fileTag: {
129
+ maxWidth: foundationTokens.unit[200],
130
+ gap: foundationTokens.unit[4],
131
+ },
132
+ },
133
+ bottomContainer: {
134
+ hintText: {
135
+ fontSize: {
136
+ sm: foundationTokens.font.fontSize[12],
137
+ md: foundationTokens.font.fontSize[12],
138
+ lg: foundationTokens.font.fontSize[12],
139
+ },
140
+ fontWeight: {
141
+ sm: foundationTokens.font.weight[400],
142
+ md: foundationTokens.font.weight[400],
143
+ lg: foundationTokens.font.weight[400],
144
+ },
145
+ lineHeight: {
146
+ sm: foundationTokens.font.lineHeight[16],
147
+ md: foundationTokens.font.lineHeight[16],
148
+ lg: foundationTokens.font.lineHeight[16],
149
+ },
150
+ color: {
151
+ default: foundationTokens.colors.gray[400],
152
+ hover: foundationTokens.colors.gray[400],
153
+ focus: foundationTokens.colors.gray[400],
154
+ disabled: foundationTokens.colors.gray[500],
155
+ error: foundationTokens.colors.gray[400],
156
+ },
157
+ },
158
+ errorMessage: {
159
+ fontSize: {
160
+ sm: foundationTokens.font.fontSize[12],
161
+ md: foundationTokens.font.fontSize[12],
162
+ lg: foundationTokens.font.fontSize[12],
163
+ },
164
+ fontWeight: {
165
+ sm: foundationTokens.font.weight[400],
166
+ md: foundationTokens.font.weight[400],
167
+ lg: foundationTokens.font.weight[400],
168
+ },
169
+ lineHeight: {
170
+ sm: foundationTokens.font.lineHeight[16],
171
+ md: foundationTokens.font.lineHeight[16],
172
+ lg: foundationTokens.font.lineHeight[16],
173
+ },
174
+ color: foundationTokens.colors.red[600],
175
+ },
176
+ },
177
+ },
178
+ lg: {
179
+ gap: foundationTokens.unit[8],
180
+ topContainer: {
181
+ label: {
182
+ fontSize: {
183
+ sm: foundationTokens.font.fontSize[14],
184
+ md: foundationTokens.font.fontSize[14],
185
+ lg: foundationTokens.font.fontSize[14],
186
+ },
187
+ fontWeight: {
188
+ sm: foundationTokens.font.weight[500],
189
+ md: foundationTokens.font.weight[500],
190
+ lg: foundationTokens.font.weight[500],
191
+ },
192
+ lineHeight: {
193
+ sm: foundationTokens.font.lineHeight[20],
194
+ md: foundationTokens.font.lineHeight[20],
195
+ lg: foundationTokens.font.lineHeight[20],
196
+ },
197
+ color: {
198
+ default: foundationTokens.colors.gray[700],
199
+ hover: foundationTokens.colors.gray[700],
200
+ focus: foundationTokens.colors.gray[700],
201
+ disabled: foundationTokens.colors.gray[400],
202
+ error: foundationTokens.colors.red[600],
203
+ },
204
+ },
205
+ subLabel: {
206
+ fontSize: {
207
+ sm: foundationTokens.font.fontSize[14],
208
+ md: foundationTokens.font.fontSize[14],
209
+ lg: foundationTokens.font.fontSize[14],
210
+ },
211
+ fontWeight: {
212
+ sm: foundationTokens.font.weight[400],
213
+ md: foundationTokens.font.weight[400],
214
+ lg: foundationTokens.font.weight[400],
215
+ },
216
+ lineHeight: {
217
+ sm: foundationTokens.font.lineHeight[20],
218
+ md: foundationTokens.font.lineHeight[20],
219
+ lg: foundationTokens.font.lineHeight[20],
220
+ },
221
+ color: {
222
+ default: foundationTokens.colors.gray[400],
223
+ hover: foundationTokens.colors.gray[400],
224
+ focus: foundationTokens.colors.gray[400],
225
+ disabled: foundationTokens.colors.gray[300],
226
+ error: foundationTokens.colors.red[600],
227
+ },
228
+ },
229
+ helpIcon: {
230
+ width: {
231
+ sm: foundationTokens.unit[14],
232
+ md: foundationTokens.unit[14],
233
+ lg: foundationTokens.unit[14],
234
+ },
235
+ color: {
236
+ default: foundationTokens.colors.gray[400],
237
+ hover: foundationTokens.colors.gray[400],
238
+ focus: foundationTokens.colors.gray[400],
239
+ disabled: foundationTokens.colors.gray[400],
240
+ error: foundationTokens.colors.red[600],
241
+ },
242
+ },
243
+ required: {
244
+ color: foundationTokens.colors.red[600],
245
+ },
246
+ },
247
+ uploadContainer: {
248
+ gap: foundationTokens.unit[20],
249
+ paddingTop: foundationTokens.unit[40],
250
+ paddingBottom: foundationTokens.unit[40],
251
+ paddingLeft: foundationTokens.unit[40],
252
+ paddingRight: foundationTokens.unit[40],
253
+ borderRadius: foundationTokens.border.radius[12],
254
+ border: {
255
+ [UploadState.IDLE]: `1px dashed ${foundationTokens.colors.gray[200]}`,
256
+ [UploadDragState.DRAG_ENTER]: `1px dashed ${foundationTokens.colors.primary[500]}`,
257
+ [UploadDragState.DRAG_LEAVE]: `1px dashed ${foundationTokens.colors.gray[200]}`,
258
+ [UploadDragState.DRAG_OVER]: `1px dashed ${foundationTokens.colors.primary[500]}`,
259
+ [UploadDragState.DROP]: `1px dashed ${foundationTokens.colors.gray[200]}`,
260
+ [UploadState.UPLOADING]: `1px dashed ${foundationTokens.colors.gray[200]}`,
261
+ [UploadState.SUCCESS]: `1px dashed ${foundationTokens.colors.gray[200]}`,
262
+ [UploadState.ERROR]: `1px dashed ${foundationTokens.colors.red[200]}`,
263
+ [UploadState.DISABLED]: `1px dashed ${foundationTokens.colors.gray[200]}`,
264
+ },
265
+ backgroundColor: {
266
+ [UploadState.IDLE]: foundationTokens.colors.gray[900],
267
+ [UploadDragState.DRAG_ENTER]:
268
+ foundationTokens.colors.primary[50],
269
+ [UploadDragState.DRAG_LEAVE]:
270
+ foundationTokens.colors.gray[900],
271
+ [UploadDragState.DRAG_OVER]:
272
+ foundationTokens.colors.primary[50],
273
+ [UploadDragState.DROP]: foundationTokens.colors.gray[900],
274
+ [UploadState.UPLOADING]: foundationTokens.colors.gray[900],
275
+ [UploadState.SUCCESS]: foundationTokens.colors.gray[900],
276
+ [UploadState.ERROR]: foundationTokens.colors.gray[900],
277
+ [UploadState.DISABLED]: foundationTokens.colors.gray[900],
278
+ },
279
+ header: {
280
+ gap: foundationTokens.unit[4],
281
+ title: {
282
+ fontSize: foundationTokens.font.fontSize[16],
283
+ fontWeight: foundationTokens.font.weight[600],
284
+ color: foundationTokens.colors.gray[100],
285
+ },
286
+ description: {
287
+ fontSize: foundationTokens.font.fontSize[14],
288
+ fontWeight: foundationTokens.font.weight[400],
289
+ color: foundationTokens.colors.gray[400],
290
+ },
291
+ errorText: {
292
+ fontSize: foundationTokens.font.fontSize[14],
293
+ fontWeight: foundationTokens.font.weight[400],
294
+ color: foundationTokens.colors.red[600],
295
+ },
296
+ },
297
+ fileTag: {
298
+ maxWidth: foundationTokens.unit[200],
299
+ gap: foundationTokens.unit[4],
300
+ },
301
+ },
302
+ bottomContainer: {
303
+ hintText: {
304
+ fontSize: {
305
+ sm: foundationTokens.font.fontSize[12],
306
+ md: foundationTokens.font.fontSize[12],
307
+ lg: foundationTokens.font.fontSize[12],
308
+ },
309
+ fontWeight: {
310
+ sm: foundationTokens.font.weight[400],
311
+ md: foundationTokens.font.weight[400],
312
+ lg: foundationTokens.font.weight[400],
313
+ },
314
+ lineHeight: {
315
+ sm: foundationTokens.font.lineHeight[16],
316
+ md: foundationTokens.font.lineHeight[16],
317
+ lg: foundationTokens.font.lineHeight[16],
318
+ },
319
+ color: {
320
+ default: foundationTokens.colors.gray[400],
321
+ hover: foundationTokens.colors.gray[400],
322
+ focus: foundationTokens.colors.gray[400],
323
+ disabled: foundationTokens.colors.gray[500],
324
+ error: foundationTokens.colors.gray[400],
325
+ },
326
+ },
327
+ errorMessage: {
328
+ fontSize: {
329
+ sm: foundationTokens.font.fontSize[12],
330
+ md: foundationTokens.font.fontSize[12],
331
+ lg: foundationTokens.font.fontSize[12],
332
+ },
333
+ fontWeight: {
334
+ sm: foundationTokens.font.weight[400],
335
+ md: foundationTokens.font.weight[400],
336
+ lg: foundationTokens.font.weight[400],
337
+ },
338
+ lineHeight: {
339
+ sm: foundationTokens.font.lineHeight[16],
340
+ md: foundationTokens.font.lineHeight[16],
341
+ lg: foundationTokens.font.lineHeight[16],
342
+ },
343
+ color: foundationTokens.colors.red[600],
344
+ },
345
+ },
346
+ },
347
+ }
348
+ }