@igne-agency/react-web-ui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (292) hide show
  1. package/README.md +32 -1
  2. package/dist/components/accordion/accordion.css +24 -19
  3. package/dist/components/accordion/accordion.d.ts +19 -3
  4. package/dist/components/accordion/accordion.js +86 -32
  5. package/dist/components/accordion/accordion.module.js +8 -8
  6. package/dist/components/active-filters/active-filter-describers.d.ts +1 -1
  7. package/dist/components/active-filters/active-filter-describers.js +1 -1
  8. package/dist/components/active-filters/active-filters.d.ts +35 -2
  9. package/dist/components/active-filters/active-filters.js +57 -52
  10. package/dist/components/active-filters/index.js +2 -2
  11. package/dist/components/attachment-tile/attachment-preview.d.ts +11 -9
  12. package/dist/components/attachment-tile/attachment-preview.js +102 -68
  13. package/dist/components/attachment-tile/attachment-tile.css +22 -13
  14. package/dist/components/attachment-tile/attachment-tile.d.ts +51 -6
  15. package/dist/components/attachment-tile/attachment-tile.js +209 -85
  16. package/dist/components/attachment-tile/attachment-tile.module.js +10 -10
  17. package/dist/components/attachment-tile/index.d.ts +1 -1
  18. package/dist/components/attachment-tile/index.js +2 -2
  19. package/dist/components/avatar/avatar.d.ts +5 -5
  20. package/dist/components/avatar/avatar.js +64 -37
  21. package/dist/components/avatar-group/avatar-group.js +2 -2
  22. package/dist/components/badge/badge.js +1 -1
  23. package/dist/components/breadcrumbs/breadcrumbs.d.ts +22 -7
  24. package/dist/components/breadcrumbs/breadcrumbs.js +189 -170
  25. package/dist/components/button/button.d.ts +2 -3
  26. package/dist/components/button/button.js +58 -77
  27. package/dist/components/button/close-button.d.ts +4 -2
  28. package/dist/components/button/close-button.js +9 -9
  29. package/dist/components/checkbox-field/checkbox-field.d.ts +17 -3
  30. package/dist/components/checkbox-field/checkbox-field.js +108 -131
  31. package/dist/components/checkbox-field/checkbox.css +26 -34
  32. package/dist/components/checkbox-field/checkbox.d.ts +51 -8
  33. package/dist/components/checkbox-field/checkbox.js +221 -57
  34. package/dist/components/checkbox-field/checkbox.module.js +6 -8
  35. package/dist/components/checkbox-field/index.d.ts +0 -1
  36. package/dist/components/checkbox-field/index.js +1 -2
  37. package/dist/components/checkbox-field/tsf-checkbox-field.d.ts +2 -2
  38. package/dist/components/checkbox-group-field/checkbox-group-field.d.ts +4 -1
  39. package/dist/components/checkbox-group-field/checkbox-group-field.js +54 -50
  40. package/dist/components/checkbox-group-field/checkbox-group.d.ts +7 -2
  41. package/dist/components/checkbox-group-field/checkbox-group.js +8 -3
  42. package/dist/components/collapsible/collapsible.css +23 -18
  43. package/dist/components/collapsible/collapsible.d.ts +18 -3
  44. package/dist/components/collapsible/collapsible.js +85 -32
  45. package/dist/components/collapsible/collapsible.module.js +7 -7
  46. package/dist/components/combobox-field/combobox-field.d.ts +9 -1
  47. package/dist/components/combobox-field/combobox-field.js +195 -175
  48. package/dist/components/combobox-field/combobox-items.d.ts +2 -2
  49. package/dist/components/combobox-field/combobox-items.js +4 -4
  50. package/dist/components/combobox-field/combobox.css +99 -96
  51. package/dist/components/combobox-field/combobox.d.ts +94 -15
  52. package/dist/components/combobox-field/combobox.js +484 -159
  53. package/dist/components/combobox-field/combobox.module.js +21 -21
  54. package/dist/components/combobox-field/index.d.ts +0 -1
  55. package/dist/components/combobox-field/selection.d.ts +4 -1
  56. package/dist/components/combobox-field/value-state-view.css +7 -3
  57. package/dist/components/combobox-field/value-state-view.d.ts +4 -2
  58. package/dist/components/combobox-field/value-state-view.js +15 -15
  59. package/dist/components/combobox-field/value-state-view.module.js +6 -4
  60. package/dist/components/composer/composer-attachments.d.ts +11 -3
  61. package/dist/components/composer/composer-attachments.js +61 -47
  62. package/dist/components/composer/composer-editor.d.ts +2 -1
  63. package/dist/components/composer/composer-editor.js +79 -71
  64. package/dist/components/composer/composer-mentions.js +2 -2
  65. package/dist/components/composer/composer.d.ts +42 -21
  66. package/dist/components/composer/composer.js +201 -58
  67. package/dist/components/composer/mention-text.js +3 -3
  68. package/dist/components/confirm-dialog/confirm-dialog.d.ts +8 -7
  69. package/dist/components/confirm-dialog/confirm-dialog.js +10 -9
  70. package/dist/components/conversation/conversation.context.d.ts +0 -5
  71. package/dist/components/conversation/conversation.d.ts +63 -29
  72. package/dist/components/conversation/conversation.js +193 -82
  73. package/dist/components/conversation/index.d.ts +1 -1
  74. package/dist/components/date-field/date-field.d.ts +10 -4
  75. package/dist/components/date-field/date-field.js +57 -43
  76. package/dist/components/date-field/date-input.d.ts +20 -3
  77. package/dist/components/date-field/date-input.js +28 -13
  78. package/dist/components/date-field/index.d.ts +1 -1
  79. package/dist/components/date-field/tsf-date-field.d.ts +1 -1
  80. package/dist/components/date-field/tsf-date-field.js +1 -1
  81. package/dist/components/date-range-field/date-range-field.d.ts +8 -4
  82. package/dist/components/date-range-field/date-range-field.js +57 -45
  83. package/dist/components/date-range-field/date-range-input.d.ts +20 -3
  84. package/dist/components/date-range-field/date-range-input.js +27 -12
  85. package/dist/components/date-range-field/tsf-date-range-field.d.ts +1 -1
  86. package/dist/components/date-range-field/tsf-date-range-field.js +1 -1
  87. package/dist/components/detail-list/detail-list.d.ts +28 -27
  88. package/dist/components/detail-list/detail-list.js +177 -121
  89. package/dist/components/dialog/dialog.d.ts +47 -27
  90. package/dist/components/dialog/dialog.js +101 -38
  91. package/dist/components/divider/divider.js +1 -1
  92. package/dist/components/drawer/drawer.d.ts +48 -30
  93. package/dist/components/drawer/drawer.js +113 -41
  94. package/dist/components/email-field/email-field.d.ts +5 -3
  95. package/dist/components/email-field/email-field.js +1 -3
  96. package/dist/components/email-field/tsf-email-field.d.ts +3 -2
  97. package/dist/components/empty-message/empty-message.d.ts +3 -3
  98. package/dist/components/empty-message/empty-message.js +3 -3
  99. package/dist/components/error-boundary/error-boundary.d.ts +5 -2
  100. package/dist/components/error-boundary/error-boundary.js +2 -3
  101. package/dist/components/error-message/error-message.d.ts +1 -1
  102. package/dist/components/error-message/error-message.js +1 -1
  103. package/dist/components/error-text/error-text.js +3 -3
  104. package/dist/components/field/field.d.ts +5 -5
  105. package/dist/components/field/field.js +9 -9
  106. package/dist/components/field/index.js +2 -2
  107. package/dist/components/field/input-parts.js +1 -1
  108. package/dist/components/field-placeholder/field-placeholder.d.ts +4 -1
  109. package/dist/components/field-placeholder/field-placeholder.js +41 -26
  110. package/dist/components/fieldset/field-group.js +1 -1
  111. package/dist/components/fieldset/fieldset-root.js +1 -1
  112. package/dist/components/fieldset/fieldset.css +4 -3
  113. package/dist/components/fieldset/fieldset.js +1 -1
  114. package/dist/components/fieldset/fieldset.module.js +2 -2
  115. package/dist/components/file-field/file-field.css +19 -15
  116. package/dist/components/file-field/file-field.d.ts +10 -1
  117. package/dist/components/file-field/file-field.js +130 -109
  118. package/dist/components/file-field/file-field.module.js +6 -4
  119. package/dist/components/file-field/file-input.d.ts +32 -9
  120. package/dist/components/file-field/file-input.js +94 -74
  121. package/dist/components/filter-bar/filter-bar.d.ts +79 -51
  122. package/dist/components/filter-bar/filter-bar.js +552 -216
  123. package/dist/components/form/form.d.ts +4 -6
  124. package/dist/components/form/form.js +6 -8
  125. package/dist/components/icon/icon.d.ts +5 -10
  126. package/dist/components/icon/icon.js +4 -6
  127. package/dist/components/link/link.js +1 -1
  128. package/dist/components/link-button/link-button.d.ts +1 -2
  129. package/dist/components/link-button/link-button.js +12 -22
  130. package/dist/components/loading-message/loading-message.d.ts +2 -2
  131. package/dist/components/loading-message/loading-message.js +1 -1
  132. package/dist/components/locale-provider/locale-provider.js +1 -1
  133. package/dist/components/menu/menu.d.ts +40 -22
  134. package/dist/components/menu/menu.js +100 -40
  135. package/dist/components/nav/nav-context.d.ts +0 -1
  136. package/dist/components/nav/nav-context.js +1 -2
  137. package/dist/components/nav/nav-item-view.d.ts +7 -7
  138. package/dist/components/nav/nav-item-view.js +27 -51
  139. package/dist/components/nav/nav.css +72 -60
  140. package/dist/components/nav/nav.d.ts +15 -8
  141. package/dist/components/nav/nav.js +105 -52
  142. package/dist/components/nav/nav.module.js +14 -14
  143. package/dist/components/number-field/number-field.d.ts +7 -1
  144. package/dist/components/number-field/number-field.js +98 -82
  145. package/dist/components/number-field/number-input.d.ts +53 -4
  146. package/dist/components/number-field/number-input.js +68 -21
  147. package/dist/components/number-field/tsf-number-field.d.ts +1 -1
  148. package/dist/components/number-field/tsf-number-field.js +1 -1
  149. package/dist/components/otp-field/otp-input.d.ts +25 -0
  150. package/dist/components/otp-field/otp-input.js +26 -1
  151. package/dist/components/pagination/pagination.d.ts +82 -23
  152. package/dist/components/pagination/pagination.js +656 -229
  153. package/dist/components/password-field/password-field.d.ts +7 -1
  154. package/dist/components/password-field/password-field.js +117 -126
  155. package/dist/components/password-field/password-strength.js +1 -1
  156. package/dist/components/password-field/tsf-password-field.d.ts +1 -1
  157. package/dist/components/password-field/tsf-password-field.js +1 -1
  158. package/dist/components/photo-field/photo-field.d.ts +17 -3
  159. package/dist/components/photo-field/photo-field.js +168 -89
  160. package/dist/components/photo-field/photo-input-context.d.ts +25 -0
  161. package/dist/components/photo-field/photo-input-context.js +14 -0
  162. package/dist/components/photo-field/photo-input.d.ts +58 -23
  163. package/dist/components/photo-field/photo-input.js +459 -261
  164. package/dist/components/popover/popover.d.ts +55 -23
  165. package/dist/components/popover/popover.js +205 -61
  166. package/dist/components/radio-group-field/radio-group.js +1 -1
  167. package/dist/components/search-field/search-field.d.ts +7 -5
  168. package/dist/components/search-field/search-field.js +4 -6
  169. package/dist/components/search-field/tsf-search-field.d.ts +1 -1
  170. package/dist/components/search-field/tsf-search-field.js +1 -1
  171. package/dist/components/segmented-control-field/segmented-control.js +1 -1
  172. package/dist/components/select-field/select-field.d.ts +7 -1
  173. package/dist/components/select-field/select-field.js +151 -139
  174. package/dist/components/select-field/select.d.ts +28 -6
  175. package/dist/components/select-field/select.js +234 -149
  176. package/dist/components/skeleton/skeleton.js +1 -1
  177. package/dist/components/spinner/spinner.css +47 -1
  178. package/dist/components/spinner/spinner.js +28 -11
  179. package/dist/components/spinner/spinner.module.js +18 -3
  180. package/dist/components/stale/stale.d.ts +17 -21
  181. package/dist/components/stale/stale.js +307 -129
  182. package/dist/components/status-message/status-message.css +22 -21
  183. package/dist/components/status-message/status-message.d.ts +10 -5
  184. package/dist/components/status-message/status-message.js +20 -24
  185. package/dist/components/status-message/status-message.module.js +6 -6
  186. package/dist/components/status-message/status-preset.d.ts +4 -5
  187. package/dist/components/status-message/status-preset.js +3 -3
  188. package/dist/components/switch-field/switch.js +1 -1
  189. package/dist/components/tabs/tabs.d.ts +51 -28
  190. package/dist/components/tabs/tabs.js +219 -144
  191. package/dist/components/tag/tag.css +23 -21
  192. package/dist/components/tag/tag.d.ts +17 -15
  193. package/dist/components/tag/tag.js +140 -65
  194. package/dist/components/tag/tag.module.js +3 -3
  195. package/dist/components/tag-group/tag-group.css +30 -27
  196. package/dist/components/tag-group/tag-group.d.ts +10 -4
  197. package/dist/components/tag-group/tag-group.js +47 -35
  198. package/dist/components/tag-group/tag-group.module.js +4 -4
  199. package/dist/components/text-field/text-field.d.ts +14 -3
  200. package/dist/components/text-field/text-field.js +154 -133
  201. package/dist/components/text-field/text-input.d.ts +89 -3
  202. package/dist/components/text-field/text-input.js +184 -70
  203. package/dist/components/textarea-field/textarea.js +1 -1
  204. package/dist/components/time-field/time-input.d.ts +6 -0
  205. package/dist/components/time-field/time-input.js +6 -0
  206. package/dist/components/time-zone-provider/time-zone-provider.js +1 -1
  207. package/dist/components/toast/index.js +2 -2
  208. package/dist/components/toast/toast-provider.css +38 -34
  209. package/dist/components/toast/toast-provider.d.ts +65 -3
  210. package/dist/components/toast/toast-provider.js +313 -148
  211. package/dist/components/toast/toast-provider.module.js +11 -17
  212. package/dist/components/toast/toast.d.ts +5 -1
  213. package/dist/components/toast/toast.js +2 -1
  214. package/dist/components/toggle-group-field/toggle-group.js +1 -1
  215. package/dist/components/tooltip/tooltip.d.ts +6 -6
  216. package/dist/components/tooltip/tooltip.js +7 -7
  217. package/dist/data-table/data-table-content.d.ts +18 -10
  218. package/dist/data-table/data-table-content.js +145 -290
  219. package/dist/data-table/data-table-context.d.ts +4 -2
  220. package/dist/data-table/data-table-context.js +1 -1
  221. package/dist/data-table/data-table-parts.d.ts +99 -0
  222. package/dist/data-table/data-table-parts.js +1182 -0
  223. package/dist/data-table/data-table-selection.d.ts +7 -3
  224. package/dist/data-table/data-table-selection.js +62 -37
  225. package/dist/data-table/data-table.css +100 -95
  226. package/dist/data-table/data-table.d.ts +49 -25
  227. package/dist/data-table/data-table.js +95 -83
  228. package/dist/data-table/data-table.module.js +34 -34
  229. package/dist/data-table/index.d.ts +2 -1
  230. package/dist/data-table/index.js +2 -1
  231. package/dist/data-view/use-data-view.d.ts +2 -2
  232. package/dist/data-view/use-data-view.js +2 -2
  233. package/dist/index.js +7 -8
  234. package/dist/lib/calendar/calendar-navigation.d.ts +9 -2
  235. package/dist/lib/calendar/calendar-navigation.js +72 -73
  236. package/dist/lib/calendar/calendar-year.d.ts +4 -3
  237. package/dist/lib/calendar/calendar-year.js +137 -156
  238. package/dist/lib/calendar/temporal.d.ts +18 -12
  239. package/dist/lib/calendar/temporal.js +191 -147
  240. package/dist/lib/table-storage.d.ts +2 -2
  241. package/dist/lib/table-storage.js +2 -2
  242. package/dist/lib/unsaved-changes/leave-guard.js +1 -1
  243. package/dist/terrazzo/index.d.ts +16 -0
  244. package/dist/terrazzo/index.js +94 -2
  245. package/dist/tokens.css +71 -69
  246. package/package.json +3 -2
  247. package/tokens/ref.tokens.json +0 -30
  248. package/tokens/sys.tokens.json +0 -7
  249. package/dist/assets/spinner.js +0 -28
  250. package/dist/components/checkbox-field/checkbox-glyph.d.ts +0 -12
  251. package/dist/components/checkbox-field/checkbox-glyph.js +0 -38
  252. package/dist/components/combobox-field/combobox-popup-body.d.ts +0 -34
  253. package/dist/components/combobox-field/combobox-popup-body.js +0 -142
  254. package/dist/components/conversation/conversation.context.js +0 -4
  255. package/dist/vendor/@material-design-icons/svg/outlined/add.js +0 -12
  256. package/dist/vendor/@material-design-icons/svg/outlined/arrow_downward.js +0 -12
  257. package/dist/vendor/@material-design-icons/svg/outlined/arrow_forward.js +0 -12
  258. package/dist/vendor/@material-design-icons/svg/outlined/arrow_upward.js +0 -12
  259. package/dist/vendor/@material-design-icons/svg/outlined/attach_file.js +0 -12
  260. package/dist/vendor/@material-design-icons/svg/outlined/block.js +0 -12
  261. package/dist/vendor/@material-design-icons/svg/outlined/calendar_today.js +0 -12
  262. package/dist/vendor/@material-design-icons/svg/outlined/check.js +0 -12
  263. package/dist/vendor/@material-design-icons/svg/outlined/check_circle.js +0 -12
  264. package/dist/vendor/@material-design-icons/svg/outlined/chevron_left.js +0 -12
  265. package/dist/vendor/@material-design-icons/svg/outlined/chevron_right.js +0 -12
  266. package/dist/vendor/@material-design-icons/svg/outlined/close.js +0 -12
  267. package/dist/vendor/@material-design-icons/svg/outlined/content_copy.js +0 -12
  268. package/dist/vendor/@material-design-icons/svg/outlined/date_range.js +0 -12
  269. package/dist/vendor/@material-design-icons/svg/outlined/description.js +0 -12
  270. package/dist/vendor/@material-design-icons/svg/outlined/download.js +0 -12
  271. package/dist/vendor/@material-design-icons/svg/outlined/error.js +0 -12
  272. package/dist/vendor/@material-design-icons/svg/outlined/error_outline.js +0 -12
  273. package/dist/vendor/@material-design-icons/svg/outlined/expand_less.js +0 -12
  274. package/dist/vendor/@material-design-icons/svg/outlined/expand_more.js +0 -12
  275. package/dist/vendor/@material-design-icons/svg/outlined/filter_alt.js +0 -12
  276. package/dist/vendor/@material-design-icons/svg/outlined/filter_alt_off.js +0 -12
  277. package/dist/vendor/@material-design-icons/svg/outlined/first_page.js +0 -12
  278. package/dist/vendor/@material-design-icons/svg/outlined/info.js +0 -12
  279. package/dist/vendor/@material-design-icons/svg/outlined/keyboard_arrow_down.js +0 -12
  280. package/dist/vendor/@material-design-icons/svg/outlined/last_page.js +0 -12
  281. package/dist/vendor/@material-design-icons/svg/outlined/mail.js +0 -12
  282. package/dist/vendor/@material-design-icons/svg/outlined/more_horiz.js +0 -12
  283. package/dist/vendor/@material-design-icons/svg/outlined/photo_camera.js +0 -12
  284. package/dist/vendor/@material-design-icons/svg/outlined/remove.js +0 -12
  285. package/dist/vendor/@material-design-icons/svg/outlined/restart_alt.js +0 -12
  286. package/dist/vendor/@material-design-icons/svg/outlined/restore.js +0 -12
  287. package/dist/vendor/@material-design-icons/svg/outlined/search.js +0 -12
  288. package/dist/vendor/@material-design-icons/svg/outlined/unfold_more.js +0 -12
  289. package/dist/vendor/@material-design-icons/svg/outlined/upload_file.js +0 -12
  290. package/dist/vendor/@material-design-icons/svg/outlined/visibility.js +0 -12
  291. package/dist/vendor/@material-design-icons/svg/outlined/visibility_off.js +0 -12
  292. package/dist/vendor/@material-design-icons/svg/outlined/warning_amber.js +0 -12
package/dist/tokens.css CHANGED
@@ -7,6 +7,8 @@
7
7
 
8
8
  :root {
9
9
  color-scheme: light;
10
+ --sys-font-family-body: system-ui, sans-serif;
11
+ --sys-font-family-heading: var(--sys-font-family-body);
10
12
  --ref-blue-0: oklch(100% 0 234.03);
11
13
  --ref-blue-10: oklch(99.01% 0.0022 234.03);
12
14
  --ref-blue-25: oklch(97.52% 0.0053 234.03);
@@ -33,181 +35,181 @@
33
35
  --ref-blue-990: oklch(1.01% 0.0021 234.03);
34
36
  --ref-blue-1000: oklch(0% 0 234.03);
35
37
  --ref-font-body-bold-1: var(--ref-font-body-bold-1-font-weight) var(--ref-font-body-bold-1-font-size)/var(--ref-font-body-bold-1-line-height) var(--ref-font-body-bold-1-font-family);
36
- --ref-font-body-bold-1-font-family: "Roboto", sans-serif;
38
+ --ref-font-body-bold-1-font-family: var(--sys-font-family-body);
37
39
  --ref-font-body-bold-1-font-size: 1rem;
38
40
  --ref-font-body-bold-1-font-weight: 700;
39
41
  --ref-font-body-bold-1-letter-spacing: 0px;
40
42
  --ref-font-body-bold-1-line-height: 1.4;
41
43
  --ref-font-body-bold-2: var(--ref-font-body-bold-2-font-weight) var(--ref-font-body-bold-2-font-size)/var(--ref-font-body-bold-2-line-height) var(--ref-font-body-bold-2-font-family);
42
- --ref-font-body-bold-2-font-family: "Roboto", sans-serif;
44
+ --ref-font-body-bold-2-font-family: var(--sys-font-family-body);
43
45
  --ref-font-body-bold-2-font-size: 1.167rem;
44
46
  --ref-font-body-bold-2-font-weight: 700;
45
47
  --ref-font-body-bold-2-letter-spacing: 0px;
46
48
  --ref-font-body-bold-2-line-height: 1.4;
47
49
  --ref-font-body-bold-3: var(--ref-font-body-bold-3-font-weight) var(--ref-font-body-bold-3-font-size)/var(--ref-font-body-bold-3-line-height) var(--ref-font-body-bold-3-font-family);
48
- --ref-font-body-bold-3-font-family: "Roboto", sans-serif;
50
+ --ref-font-body-bold-3-font-family: var(--sys-font-family-body);
49
51
  --ref-font-body-bold-3-font-size: 1.333rem;
50
52
  --ref-font-body-bold-3-font-weight: 700;
51
53
  --ref-font-body-bold-3-letter-spacing: 0px;
52
54
  --ref-font-body-bold-3-line-height: 1.4;
53
55
  --ref-font-body-bold-4: var(--ref-font-body-bold-4-font-weight) var(--ref-font-body-bold-4-font-size)/var(--ref-font-body-bold-4-line-height) var(--ref-font-body-bold-4-font-family);
54
- --ref-font-body-bold-4-font-family: "Roboto", sans-serif;
56
+ --ref-font-body-bold-4-font-family: var(--sys-font-family-body);
55
57
  --ref-font-body-bold-4-font-size: 1.5rem;
56
58
  --ref-font-body-bold-4-font-weight: 700;
57
59
  --ref-font-body-bold-4-letter-spacing: 0px;
58
60
  --ref-font-body-bold-4-line-height: 1.4;
59
61
  --ref-font-body-bold-5: var(--ref-font-body-bold-5-font-weight) var(--ref-font-body-bold-5-font-size)/var(--ref-font-body-bold-5-line-height) var(--ref-font-body-bold-5-font-family);
60
- --ref-font-body-bold-5-font-family: "Roboto", sans-serif;
62
+ --ref-font-body-bold-5-font-family: var(--sys-font-family-body);
61
63
  --ref-font-body-bold-5-font-size: 1.667rem;
62
64
  --ref-font-body-bold-5-font-weight: 700;
63
65
  --ref-font-body-bold-5-letter-spacing: 0px;
64
66
  --ref-font-body-bold-5-line-height: 1.4;
65
67
  --ref-font-body-extrabold-1: var(--ref-font-body-extrabold-1-font-weight) var(--ref-font-body-extrabold-1-font-size)/var(--ref-font-body-extrabold-1-line-height) var(--ref-font-body-extrabold-1-font-family);
66
- --ref-font-body-extrabold-1-font-family: "Roboto", sans-serif;
68
+ --ref-font-body-extrabold-1-font-family: var(--sys-font-family-body);
67
69
  --ref-font-body-extrabold-1-font-size: 1rem;
68
70
  --ref-font-body-extrabold-1-font-weight: 800;
69
71
  --ref-font-body-extrabold-1-letter-spacing: 0px;
70
72
  --ref-font-body-extrabold-1-line-height: 1.4;
71
73
  --ref-font-body-extrabold-2: var(--ref-font-body-extrabold-2-font-weight) var(--ref-font-body-extrabold-2-font-size)/var(--ref-font-body-extrabold-2-line-height) var(--ref-font-body-extrabold-2-font-family);
72
- --ref-font-body-extrabold-2-font-family: "Roboto", sans-serif;
74
+ --ref-font-body-extrabold-2-font-family: var(--sys-font-family-body);
73
75
  --ref-font-body-extrabold-2-font-size: 1.167rem;
74
76
  --ref-font-body-extrabold-2-font-weight: 800;
75
77
  --ref-font-body-extrabold-2-letter-spacing: 0px;
76
78
  --ref-font-body-extrabold-2-line-height: 1.4;
77
79
  --ref-font-body-extrabold-3: var(--ref-font-body-extrabold-3-font-weight) var(--ref-font-body-extrabold-3-font-size)/var(--ref-font-body-extrabold-3-line-height) var(--ref-font-body-extrabold-3-font-family);
78
- --ref-font-body-extrabold-3-font-family: "Roboto", sans-serif;
80
+ --ref-font-body-extrabold-3-font-family: var(--sys-font-family-body);
79
81
  --ref-font-body-extrabold-3-font-size: 1.333rem;
80
82
  --ref-font-body-extrabold-3-font-weight: 800;
81
83
  --ref-font-body-extrabold-3-letter-spacing: 0px;
82
84
  --ref-font-body-extrabold-3-line-height: 1.4;
83
85
  --ref-font-body-extrabold-4: var(--ref-font-body-extrabold-4-font-weight) var(--ref-font-body-extrabold-4-font-size)/var(--ref-font-body-extrabold-4-line-height) var(--ref-font-body-extrabold-4-font-family);
84
- --ref-font-body-extrabold-4-font-family: "Roboto", sans-serif;
86
+ --ref-font-body-extrabold-4-font-family: var(--sys-font-family-body);
85
87
  --ref-font-body-extrabold-4-font-size: 1.5rem;
86
88
  --ref-font-body-extrabold-4-font-weight: 800;
87
89
  --ref-font-body-extrabold-4-letter-spacing: 0px;
88
90
  --ref-font-body-extrabold-4-line-height: 1.4;
89
91
  --ref-font-body-extrabold-5: var(--ref-font-body-extrabold-5-font-weight) var(--ref-font-body-extrabold-5-font-size)/var(--ref-font-body-extrabold-5-line-height) var(--ref-font-body-extrabold-5-font-family);
90
- --ref-font-body-extrabold-5-font-family: "Roboto", sans-serif;
92
+ --ref-font-body-extrabold-5-font-family: var(--sys-font-family-body);
91
93
  --ref-font-body-extrabold-5-font-size: 1.667rem;
92
94
  --ref-font-body-extrabold-5-font-weight: 800;
93
95
  --ref-font-body-extrabold-5-letter-spacing: 0px;
94
96
  --ref-font-body-extrabold-5-line-height: 1.4;
95
97
  --ref-font-body-regular-1: var(--ref-font-body-regular-1-font-weight) var(--ref-font-body-regular-1-font-size)/var(--ref-font-body-regular-1-line-height) var(--ref-font-body-regular-1-font-family);
96
- --ref-font-body-regular-1-font-family: "Roboto", sans-serif;
98
+ --ref-font-body-regular-1-font-family: var(--sys-font-family-body);
97
99
  --ref-font-body-regular-1-font-size: 1rem;
98
100
  --ref-font-body-regular-1-font-weight: 400;
99
101
  --ref-font-body-regular-1-letter-spacing: 0px;
100
102
  --ref-font-body-regular-1-line-height: 1.4;
101
103
  --ref-font-body-regular-2: var(--ref-font-body-regular-2-font-weight) var(--ref-font-body-regular-2-font-size)/var(--ref-font-body-regular-2-line-height) var(--ref-font-body-regular-2-font-family);
102
- --ref-font-body-regular-2-font-family: "Roboto", sans-serif;
104
+ --ref-font-body-regular-2-font-family: var(--sys-font-family-body);
103
105
  --ref-font-body-regular-2-font-size: 1.167rem;
104
106
  --ref-font-body-regular-2-font-weight: 400;
105
107
  --ref-font-body-regular-2-letter-spacing: 0px;
106
108
  --ref-font-body-regular-2-line-height: 1.4;
107
109
  --ref-font-body-regular-3: var(--ref-font-body-regular-3-font-weight) var(--ref-font-body-regular-3-font-size)/var(--ref-font-body-regular-3-line-height) var(--ref-font-body-regular-3-font-family);
108
- --ref-font-body-regular-3-font-family: "Roboto", sans-serif;
110
+ --ref-font-body-regular-3-font-family: var(--sys-font-family-body);
109
111
  --ref-font-body-regular-3-font-size: 1.333rem;
110
112
  --ref-font-body-regular-3-font-weight: 400;
111
113
  --ref-font-body-regular-3-letter-spacing: 0px;
112
114
  --ref-font-body-regular-3-line-height: 1.4;
113
115
  --ref-font-body-regular-4: var(--ref-font-body-regular-4-font-weight) var(--ref-font-body-regular-4-font-size)/var(--ref-font-body-regular-4-line-height) var(--ref-font-body-regular-4-font-family);
114
- --ref-font-body-regular-4-font-family: "Roboto", sans-serif;
116
+ --ref-font-body-regular-4-font-family: var(--sys-font-family-body);
115
117
  --ref-font-body-regular-4-font-size: 1.5rem;
116
118
  --ref-font-body-regular-4-font-weight: 400;
117
119
  --ref-font-body-regular-4-letter-spacing: 0px;
118
120
  --ref-font-body-regular-4-line-height: 1.4;
119
121
  --ref-font-body-regular-5: var(--ref-font-body-regular-5-font-weight) var(--ref-font-body-regular-5-font-size)/var(--ref-font-body-regular-5-line-height) var(--ref-font-body-regular-5-font-family);
120
- --ref-font-body-regular-5-font-family: "Roboto", sans-serif;
122
+ --ref-font-body-regular-5-font-family: var(--sys-font-family-body);
121
123
  --ref-font-body-regular-5-font-size: 1.667rem;
122
124
  --ref-font-body-regular-5-font-weight: 400;
123
125
  --ref-font-body-regular-5-letter-spacing: 0px;
124
126
  --ref-font-body-regular-5-line-height: 1.4;
125
127
  --ref-font-body-semibold-1: var(--ref-font-body-semibold-1-font-weight) var(--ref-font-body-semibold-1-font-size)/var(--ref-font-body-semibold-1-line-height) var(--ref-font-body-semibold-1-font-family);
126
- --ref-font-body-semibold-1-font-family: "Roboto", sans-serif;
128
+ --ref-font-body-semibold-1-font-family: var(--sys-font-family-body);
127
129
  --ref-font-body-semibold-1-font-size: 1rem;
128
130
  --ref-font-body-semibold-1-font-weight: 600;
129
131
  --ref-font-body-semibold-1-letter-spacing: 0px;
130
132
  --ref-font-body-semibold-1-line-height: 1.4;
131
133
  --ref-font-body-semibold-2: var(--ref-font-body-semibold-2-font-weight) var(--ref-font-body-semibold-2-font-size)/var(--ref-font-body-semibold-2-line-height) var(--ref-font-body-semibold-2-font-family);
132
- --ref-font-body-semibold-2-font-family: "Roboto", sans-serif;
134
+ --ref-font-body-semibold-2-font-family: var(--sys-font-family-body);
133
135
  --ref-font-body-semibold-2-font-size: 1.167rem;
134
136
  --ref-font-body-semibold-2-font-weight: 600;
135
137
  --ref-font-body-semibold-2-letter-spacing: 0px;
136
138
  --ref-font-body-semibold-2-line-height: 1.4;
137
139
  --ref-font-body-semibold-3: var(--ref-font-body-semibold-3-font-weight) var(--ref-font-body-semibold-3-font-size)/var(--ref-font-body-semibold-3-line-height) var(--ref-font-body-semibold-3-font-family);
138
- --ref-font-body-semibold-3-font-family: "Roboto", sans-serif;
140
+ --ref-font-body-semibold-3-font-family: var(--sys-font-family-body);
139
141
  --ref-font-body-semibold-3-font-size: 1.333rem;
140
142
  --ref-font-body-semibold-3-font-weight: 600;
141
143
  --ref-font-body-semibold-3-letter-spacing: 0px;
142
144
  --ref-font-body-semibold-3-line-height: 1.4;
143
145
  --ref-font-body-semibold-4: var(--ref-font-body-semibold-4-font-weight) var(--ref-font-body-semibold-4-font-size)/var(--ref-font-body-semibold-4-line-height) var(--ref-font-body-semibold-4-font-family);
144
- --ref-font-body-semibold-4-font-family: "Roboto", sans-serif;
146
+ --ref-font-body-semibold-4-font-family: var(--sys-font-family-body);
145
147
  --ref-font-body-semibold-4-font-size: 1.5rem;
146
148
  --ref-font-body-semibold-4-font-weight: 600;
147
149
  --ref-font-body-semibold-4-letter-spacing: 0px;
148
150
  --ref-font-body-semibold-4-line-height: 1.4;
149
151
  --ref-font-body-semibold-5: var(--ref-font-body-semibold-5-font-weight) var(--ref-font-body-semibold-5-font-size)/var(--ref-font-body-semibold-5-line-height) var(--ref-font-body-semibold-5-font-family);
150
- --ref-font-body-semibold-5-font-family: "Roboto", sans-serif;
152
+ --ref-font-body-semibold-5-font-family: var(--sys-font-family-body);
151
153
  --ref-font-body-semibold-5-font-size: 1.667rem;
152
154
  --ref-font-body-semibold-5-font-weight: 600;
153
155
  --ref-font-body-semibold-5-letter-spacing: 0px;
154
156
  --ref-font-body-semibold-5-line-height: 1.4;
155
157
  --ref-font-heading-bold-1: var(--ref-font-heading-bold-1-font-weight) var(--ref-font-heading-bold-1-font-size)/var(--ref-font-heading-bold-1-line-height) var(--ref-font-heading-bold-1-font-family);
156
- --ref-font-heading-bold-1-font-family: "Satoshi", sans-serif;
158
+ --ref-font-heading-bold-1-font-family: var(--sys-font-family-heading);
157
159
  --ref-font-heading-bold-1-font-size: 1.5rem;
158
160
  --ref-font-heading-bold-1-font-weight: 700;
159
161
  --ref-font-heading-bold-1-letter-spacing: 0px;
160
162
  --ref-font-heading-bold-1-line-height: 1.4;
161
163
  --ref-font-heading-bold-2: var(--ref-font-heading-bold-2-font-weight) var(--ref-font-heading-bold-2-font-size)/var(--ref-font-heading-bold-2-line-height) var(--ref-font-heading-bold-2-font-family);
162
- --ref-font-heading-bold-2-font-family: "Satoshi", sans-serif;
164
+ --ref-font-heading-bold-2-font-family: var(--sys-font-family-heading);
163
165
  --ref-font-heading-bold-2-font-size: 1.833rem;
164
166
  --ref-font-heading-bold-2-font-weight: 700;
165
167
  --ref-font-heading-bold-2-letter-spacing: 0px;
166
168
  --ref-font-heading-bold-2-line-height: 1.4;
167
169
  --ref-font-heading-bold-3: var(--ref-font-heading-bold-3-font-weight) var(--ref-font-heading-bold-3-font-size)/var(--ref-font-heading-bold-3-line-height) var(--ref-font-heading-bold-3-font-family);
168
- --ref-font-heading-bold-3-font-family: "Satoshi", sans-serif;
170
+ --ref-font-heading-bold-3-font-family: var(--sys-font-family-heading);
169
171
  --ref-font-heading-bold-3-font-size: 2.25rem;
170
172
  --ref-font-heading-bold-3-font-weight: 700;
171
173
  --ref-font-heading-bold-3-letter-spacing: 0px;
172
174
  --ref-font-heading-bold-3-line-height: 1.4;
173
175
  --ref-font-heading-bold-4: var(--ref-font-heading-bold-4-font-weight) var(--ref-font-heading-bold-4-font-size)/var(--ref-font-heading-bold-4-line-height) var(--ref-font-heading-bold-4-font-family);
174
- --ref-font-heading-bold-4-font-family: "Satoshi", sans-serif;
176
+ --ref-font-heading-bold-4-font-family: var(--sys-font-family-heading);
175
177
  --ref-font-heading-bold-4-font-size: 2.75rem;
176
178
  --ref-font-heading-bold-4-font-weight: 700;
177
179
  --ref-font-heading-bold-4-letter-spacing: 0px;
178
180
  --ref-font-heading-bold-4-line-height: 1.4;
179
181
  --ref-font-heading-bold-5: var(--ref-font-heading-bold-5-font-weight) var(--ref-font-heading-bold-5-font-size)/var(--ref-font-heading-bold-5-line-height) var(--ref-font-heading-bold-5-font-family);
180
- --ref-font-heading-bold-5-font-family: "Satoshi", sans-serif;
182
+ --ref-font-heading-bold-5-font-family: var(--sys-font-family-heading);
181
183
  --ref-font-heading-bold-5-font-size: 3.333rem;
182
184
  --ref-font-heading-bold-5-font-weight: 700;
183
185
  --ref-font-heading-bold-5-letter-spacing: 0px;
184
186
  --ref-font-heading-bold-5-line-height: 1.4;
185
187
  --ref-font-heading-regular-1: var(--ref-font-heading-regular-1-font-weight) var(--ref-font-heading-regular-1-font-size)/var(--ref-font-heading-regular-1-line-height) var(--ref-font-heading-regular-1-font-family);
186
- --ref-font-heading-regular-1-font-family: "Satoshi", sans-serif;
188
+ --ref-font-heading-regular-1-font-family: var(--sys-font-family-heading);
187
189
  --ref-font-heading-regular-1-font-size: 1.5rem;
188
190
  --ref-font-heading-regular-1-font-weight: 400;
189
191
  --ref-font-heading-regular-1-letter-spacing: 0px;
190
192
  --ref-font-heading-regular-1-line-height: 1.4;
191
193
  --ref-font-heading-regular-2: var(--ref-font-heading-regular-2-font-weight) var(--ref-font-heading-regular-2-font-size)/var(--ref-font-heading-regular-2-line-height) var(--ref-font-heading-regular-2-font-family);
192
- --ref-font-heading-regular-2-font-family: "Satoshi", sans-serif;
194
+ --ref-font-heading-regular-2-font-family: var(--sys-font-family-heading);
193
195
  --ref-font-heading-regular-2-font-size: 1.833rem;
194
196
  --ref-font-heading-regular-2-font-weight: 400;
195
197
  --ref-font-heading-regular-2-letter-spacing: 0px;
196
198
  --ref-font-heading-regular-2-line-height: 1.4;
197
199
  --ref-font-heading-regular-3: var(--ref-font-heading-regular-3-font-weight) var(--ref-font-heading-regular-3-font-size)/var(--ref-font-heading-regular-3-line-height) var(--ref-font-heading-regular-3-font-family);
198
- --ref-font-heading-regular-3-font-family: "Satoshi", sans-serif;
200
+ --ref-font-heading-regular-3-font-family: var(--sys-font-family-heading);
199
201
  --ref-font-heading-regular-3-font-size: 2.25rem;
200
202
  --ref-font-heading-regular-3-font-weight: 400;
201
203
  --ref-font-heading-regular-3-letter-spacing: 0px;
202
204
  --ref-font-heading-regular-3-line-height: 1.4;
203
205
  --ref-font-heading-regular-4: var(--ref-font-heading-regular-4-font-weight) var(--ref-font-heading-regular-4-font-size)/var(--ref-font-heading-regular-4-line-height) var(--ref-font-heading-regular-4-font-family);
204
- --ref-font-heading-regular-4-font-family: "Satoshi", sans-serif;
206
+ --ref-font-heading-regular-4-font-family: var(--sys-font-family-heading);
205
207
  --ref-font-heading-regular-4-font-size: 2.75rem;
206
208
  --ref-font-heading-regular-4-font-weight: 400;
207
209
  --ref-font-heading-regular-4-letter-spacing: 0px;
208
210
  --ref-font-heading-regular-4-line-height: 1.4;
209
211
  --ref-font-heading-regular-5: var(--ref-font-heading-regular-5-font-weight) var(--ref-font-heading-regular-5-font-size)/var(--ref-font-heading-regular-5-line-height) var(--ref-font-heading-regular-5-font-family);
210
- --ref-font-heading-regular-5-font-family: "Satoshi", sans-serif;
212
+ --ref-font-heading-regular-5-font-family: var(--sys-font-family-heading);
211
213
  --ref-font-heading-regular-5-font-size: 3.333rem;
212
214
  --ref-font-heading-regular-5-font-weight: 400;
213
215
  --ref-font-heading-regular-5-letter-spacing: 0px;
@@ -394,79 +396,79 @@
394
396
  --sys-focus-ring-offset: 2px;
395
397
  --sys-focus-ring-width: 3px;
396
398
  --sys-font-body-large: var(--sys-font-body-large-font-weight) var(--sys-font-body-large-font-size)/var(--sys-font-body-large-line-height) var(--sys-font-body-large-font-family);
397
- --sys-font-body-large-font-family: var(--ref-font-body-regular-2-font-family);
399
+ --sys-font-body-large-font-family: var(--sys-font-family-body);
398
400
  --sys-font-body-large-font-size: var(--ref-font-body-regular-2-font-size);
399
401
  --sys-font-body-large-font-weight: var(--ref-font-body-regular-2-font-weight);
400
402
  --sys-font-body-large-letter-spacing: var(--ref-font-body-regular-2-letter-spacing);
401
403
  --sys-font-body-large-line-height: var(--ref-font-body-regular-2-line-height);
402
404
  --sys-font-body-medium: var(--sys-font-body-medium-font-weight) var(--sys-font-body-medium-font-size)/var(--sys-font-body-medium-line-height) var(--sys-font-body-medium-font-family);
403
- --sys-font-body-medium-font-family: var(--ref-font-body-regular-1-font-family);
405
+ --sys-font-body-medium-font-family: var(--sys-font-family-body);
404
406
  --sys-font-body-medium-font-size: var(--ref-font-body-regular-1-font-size);
405
407
  --sys-font-body-medium-font-weight: var(--ref-font-body-regular-1-font-weight);
406
408
  --sys-font-body-medium-letter-spacing: var(--ref-font-body-regular-1-letter-spacing);
407
409
  --sys-font-body-medium-line-height: var(--ref-font-body-regular-1-line-height);
408
410
  --sys-font-body-medium-strong: var(--sys-font-body-medium-strong-font-weight) var(--sys-font-body-medium-strong-font-size)/var(--sys-font-body-medium-strong-line-height) var(--sys-font-body-medium-strong-font-family);
409
- --sys-font-body-medium-strong-font-family: var(--ref-font-body-semibold-1-font-family);
411
+ --sys-font-body-medium-strong-font-family: var(--sys-font-family-body);
410
412
  --sys-font-body-medium-strong-font-size: var(--ref-font-body-semibold-1-font-size);
411
413
  --sys-font-body-medium-strong-font-weight: var(--ref-font-body-semibold-1-font-weight);
412
414
  --sys-font-body-medium-strong-letter-spacing: var(--ref-font-body-semibold-1-letter-spacing);
413
415
  --sys-font-body-medium-strong-line-height: var(--ref-font-body-semibold-1-line-height);
414
416
  --sys-font-body-small: var(--sys-font-body-small-font-weight) var(--sys-font-body-small-font-size)/var(--sys-font-body-small-line-height) var(--sys-font-body-small-font-family);
415
- --sys-font-body-small-font-family: "Roboto", sans-serif;
417
+ --sys-font-body-small-font-family: var(--sys-font-family-body);
416
418
  --sys-font-body-small-font-size: 0.917rem;
417
419
  --sys-font-body-small-font-weight: 400;
418
420
  --sys-font-body-small-letter-spacing: 0px;
419
421
  --sys-font-body-small-line-height: 1.4;
420
422
  --sys-font-heading-large: var(--sys-font-heading-large-font-weight) var(--sys-font-heading-large-font-size)/var(--sys-font-heading-large-line-height) var(--sys-font-heading-large-font-family);
421
- --sys-font-heading-large-font-family: var(--ref-font-heading-bold-3-font-family);
423
+ --sys-font-heading-large-font-family: var(--sys-font-family-heading);
422
424
  --sys-font-heading-large-font-size: var(--ref-font-heading-bold-3-font-size);
423
425
  --sys-font-heading-large-font-weight: var(--ref-font-heading-bold-3-font-weight);
424
426
  --sys-font-heading-large-letter-spacing: var(--ref-font-heading-bold-3-letter-spacing);
425
427
  --sys-font-heading-large-line-height: var(--ref-font-heading-bold-3-line-height);
426
428
  --sys-font-heading-medium: var(--sys-font-heading-medium-font-weight) var(--sys-font-heading-medium-font-size)/var(--sys-font-heading-medium-line-height) var(--sys-font-heading-medium-font-family);
427
- --sys-font-heading-medium-font-family: var(--ref-font-heading-bold-2-font-family);
429
+ --sys-font-heading-medium-font-family: var(--sys-font-family-heading);
428
430
  --sys-font-heading-medium-font-size: var(--ref-font-heading-bold-2-font-size);
429
431
  --sys-font-heading-medium-font-weight: var(--ref-font-heading-bold-2-font-weight);
430
432
  --sys-font-heading-medium-letter-spacing: var(--ref-font-heading-bold-2-letter-spacing);
431
433
  --sys-font-heading-medium-line-height: var(--ref-font-heading-bold-2-line-height);
432
434
  --sys-font-heading-small: var(--sys-font-heading-small-font-weight) var(--sys-font-heading-small-font-size)/var(--sys-font-heading-small-line-height) var(--sys-font-heading-small-font-family);
433
- --sys-font-heading-small-font-family: var(--ref-font-heading-bold-1-font-family);
435
+ --sys-font-heading-small-font-family: var(--sys-font-family-heading);
434
436
  --sys-font-heading-small-font-size: var(--ref-font-heading-bold-1-font-size);
435
437
  --sys-font-heading-small-font-weight: var(--ref-font-heading-bold-1-font-weight);
436
438
  --sys-font-heading-small-letter-spacing: var(--ref-font-heading-bold-1-letter-spacing);
437
439
  --sys-font-heading-small-line-height: var(--ref-font-heading-bold-1-line-height);
438
440
  --sys-font-label-large: var(--sys-font-label-large-font-weight) var(--sys-font-label-large-font-size)/var(--sys-font-label-large-line-height) var(--sys-font-label-large-font-family);
439
- --sys-font-label-large-font-family: "Roboto", sans-serif;
441
+ --sys-font-label-large-font-family: var(--sys-font-family-body);
440
442
  --sys-font-label-large-font-size: 1.167rem;
441
443
  --sys-font-label-large-font-weight: 700;
442
444
  --sys-font-label-large-letter-spacing: 0px;
443
445
  --sys-font-label-large-line-height: 1.2;
444
446
  --sys-font-label-large-strong: var(--sys-font-label-large-strong-font-weight) var(--sys-font-label-large-strong-font-size)/var(--sys-font-label-large-strong-line-height) var(--sys-font-label-large-strong-font-family);
445
- --sys-font-label-large-strong-font-family: "Roboto", sans-serif;
447
+ --sys-font-label-large-strong-font-family: var(--sys-font-family-body);
446
448
  --sys-font-label-large-strong-font-size: 1.167rem;
447
449
  --sys-font-label-large-strong-font-weight: 800;
448
450
  --sys-font-label-large-strong-letter-spacing: 0px;
449
451
  --sys-font-label-large-strong-line-height: 1.2;
450
452
  --sys-font-label-medium: var(--sys-font-label-medium-font-weight) var(--sys-font-label-medium-font-size)/var(--sys-font-label-medium-line-height) var(--sys-font-label-medium-font-family);
451
- --sys-font-label-medium-font-family: "Roboto", sans-serif;
453
+ --sys-font-label-medium-font-family: var(--sys-font-family-body);
452
454
  --sys-font-label-medium-font-size: 1rem;
453
455
  --sys-font-label-medium-font-weight: 600;
454
456
  --sys-font-label-medium-letter-spacing: 0px;
455
457
  --sys-font-label-medium-line-height: 1.2;
456
458
  --sys-font-label-medium-strong: var(--sys-font-label-medium-strong-font-weight) var(--sys-font-label-medium-strong-font-size)/var(--sys-font-label-medium-strong-line-height) var(--sys-font-label-medium-strong-font-family);
457
- --sys-font-label-medium-strong-font-family: "Roboto", sans-serif;
459
+ --sys-font-label-medium-strong-font-family: var(--sys-font-family-body);
458
460
  --sys-font-label-medium-strong-font-size: 1rem;
459
461
  --sys-font-label-medium-strong-font-weight: 800;
460
462
  --sys-font-label-medium-strong-letter-spacing: 0px;
461
463
  --sys-font-label-medium-strong-line-height: 1.2;
462
464
  --sys-font-label-small: var(--sys-font-label-small-font-weight) var(--sys-font-label-small-font-size)/var(--sys-font-label-small-line-height) var(--sys-font-label-small-font-family);
463
- --sys-font-label-small-font-family: "Roboto", sans-serif;
465
+ --sys-font-label-small-font-family: var(--sys-font-family-body);
464
466
  --sys-font-label-small-font-size: 0.917rem;
465
467
  --sys-font-label-small-font-weight: 600;
466
468
  --sys-font-label-small-letter-spacing: 0px;
467
469
  --sys-font-label-small-line-height: 1.2;
468
470
  --sys-font-label-small-strong: var(--sys-font-label-small-strong-font-weight) var(--sys-font-label-small-strong-font-size)/var(--sys-font-label-small-strong-line-height) var(--sys-font-label-small-strong-font-family);
469
- --sys-font-label-small-strong-font-family: "Roboto", sans-serif;
471
+ --sys-font-label-small-strong-font-family: var(--sys-font-family-body);
470
472
  --sys-font-label-small-strong-font-size: 0.917rem;
471
473
  --sys-font-label-small-strong-font-weight: 800;
472
474
  --sys-font-label-small-strong-letter-spacing: 0px;
@@ -654,79 +656,79 @@ html[data-theme="dark"] {
654
656
  --sys-focus-ring-offset: 2px;
655
657
  --sys-focus-ring-width: 3px;
656
658
  --sys-font-body-large: var(--sys-font-body-large-font-weight) var(--sys-font-body-large-font-size)/var(--sys-font-body-large-line-height) var(--sys-font-body-large-font-family);
657
- --sys-font-body-large-font-family: var(--ref-font-body-regular-2-font-family);
659
+ --sys-font-body-large-font-family: var(--sys-font-family-body);
658
660
  --sys-font-body-large-font-size: var(--ref-font-body-regular-2-font-size);
659
661
  --sys-font-body-large-font-weight: var(--ref-font-body-regular-2-font-weight);
660
662
  --sys-font-body-large-letter-spacing: var(--ref-font-body-regular-2-letter-spacing);
661
663
  --sys-font-body-large-line-height: var(--ref-font-body-regular-2-line-height);
662
664
  --sys-font-body-medium: var(--sys-font-body-medium-font-weight) var(--sys-font-body-medium-font-size)/var(--sys-font-body-medium-line-height) var(--sys-font-body-medium-font-family);
663
- --sys-font-body-medium-font-family: var(--ref-font-body-regular-1-font-family);
665
+ --sys-font-body-medium-font-family: var(--sys-font-family-body);
664
666
  --sys-font-body-medium-font-size: var(--ref-font-body-regular-1-font-size);
665
667
  --sys-font-body-medium-font-weight: var(--ref-font-body-regular-1-font-weight);
666
668
  --sys-font-body-medium-letter-spacing: var(--ref-font-body-regular-1-letter-spacing);
667
669
  --sys-font-body-medium-line-height: var(--ref-font-body-regular-1-line-height);
668
670
  --sys-font-body-medium-strong: var(--sys-font-body-medium-strong-font-weight) var(--sys-font-body-medium-strong-font-size)/var(--sys-font-body-medium-strong-line-height) var(--sys-font-body-medium-strong-font-family);
669
- --sys-font-body-medium-strong-font-family: var(--ref-font-body-semibold-1-font-family);
671
+ --sys-font-body-medium-strong-font-family: var(--sys-font-family-body);
670
672
  --sys-font-body-medium-strong-font-size: var(--ref-font-body-semibold-1-font-size);
671
673
  --sys-font-body-medium-strong-font-weight: var(--ref-font-body-semibold-1-font-weight);
672
674
  --sys-font-body-medium-strong-letter-spacing: var(--ref-font-body-semibold-1-letter-spacing);
673
675
  --sys-font-body-medium-strong-line-height: var(--ref-font-body-semibold-1-line-height);
674
676
  --sys-font-body-small: var(--sys-font-body-small-font-weight) var(--sys-font-body-small-font-size)/var(--sys-font-body-small-line-height) var(--sys-font-body-small-font-family);
675
- --sys-font-body-small-font-family: "Roboto", sans-serif;
677
+ --sys-font-body-small-font-family: var(--sys-font-family-body);
676
678
  --sys-font-body-small-font-size: 0.917rem;
677
679
  --sys-font-body-small-font-weight: 400;
678
680
  --sys-font-body-small-letter-spacing: 0px;
679
681
  --sys-font-body-small-line-height: 1.4;
680
682
  --sys-font-heading-large: var(--sys-font-heading-large-font-weight) var(--sys-font-heading-large-font-size)/var(--sys-font-heading-large-line-height) var(--sys-font-heading-large-font-family);
681
- --sys-font-heading-large-font-family: var(--ref-font-heading-bold-3-font-family);
683
+ --sys-font-heading-large-font-family: var(--sys-font-family-heading);
682
684
  --sys-font-heading-large-font-size: var(--ref-font-heading-bold-3-font-size);
683
685
  --sys-font-heading-large-font-weight: var(--ref-font-heading-bold-3-font-weight);
684
686
  --sys-font-heading-large-letter-spacing: var(--ref-font-heading-bold-3-letter-spacing);
685
687
  --sys-font-heading-large-line-height: var(--ref-font-heading-bold-3-line-height);
686
688
  --sys-font-heading-medium: var(--sys-font-heading-medium-font-weight) var(--sys-font-heading-medium-font-size)/var(--sys-font-heading-medium-line-height) var(--sys-font-heading-medium-font-family);
687
- --sys-font-heading-medium-font-family: var(--ref-font-heading-bold-2-font-family);
689
+ --sys-font-heading-medium-font-family: var(--sys-font-family-heading);
688
690
  --sys-font-heading-medium-font-size: var(--ref-font-heading-bold-2-font-size);
689
691
  --sys-font-heading-medium-font-weight: var(--ref-font-heading-bold-2-font-weight);
690
692
  --sys-font-heading-medium-letter-spacing: var(--ref-font-heading-bold-2-letter-spacing);
691
693
  --sys-font-heading-medium-line-height: var(--ref-font-heading-bold-2-line-height);
692
694
  --sys-font-heading-small: var(--sys-font-heading-small-font-weight) var(--sys-font-heading-small-font-size)/var(--sys-font-heading-small-line-height) var(--sys-font-heading-small-font-family);
693
- --sys-font-heading-small-font-family: var(--ref-font-heading-bold-1-font-family);
695
+ --sys-font-heading-small-font-family: var(--sys-font-family-heading);
694
696
  --sys-font-heading-small-font-size: var(--ref-font-heading-bold-1-font-size);
695
697
  --sys-font-heading-small-font-weight: var(--ref-font-heading-bold-1-font-weight);
696
698
  --sys-font-heading-small-letter-spacing: var(--ref-font-heading-bold-1-letter-spacing);
697
699
  --sys-font-heading-small-line-height: var(--ref-font-heading-bold-1-line-height);
698
700
  --sys-font-label-large: var(--sys-font-label-large-font-weight) var(--sys-font-label-large-font-size)/var(--sys-font-label-large-line-height) var(--sys-font-label-large-font-family);
699
- --sys-font-label-large-font-family: "Roboto", sans-serif;
701
+ --sys-font-label-large-font-family: var(--sys-font-family-body);
700
702
  --sys-font-label-large-font-size: 1.167rem;
701
703
  --sys-font-label-large-font-weight: 700;
702
704
  --sys-font-label-large-letter-spacing: 0px;
703
705
  --sys-font-label-large-line-height: 1.2;
704
706
  --sys-font-label-large-strong: var(--sys-font-label-large-strong-font-weight) var(--sys-font-label-large-strong-font-size)/var(--sys-font-label-large-strong-line-height) var(--sys-font-label-large-strong-font-family);
705
- --sys-font-label-large-strong-font-family: "Roboto", sans-serif;
707
+ --sys-font-label-large-strong-font-family: var(--sys-font-family-body);
706
708
  --sys-font-label-large-strong-font-size: 1.167rem;
707
709
  --sys-font-label-large-strong-font-weight: 800;
708
710
  --sys-font-label-large-strong-letter-spacing: 0px;
709
711
  --sys-font-label-large-strong-line-height: 1.2;
710
712
  --sys-font-label-medium: var(--sys-font-label-medium-font-weight) var(--sys-font-label-medium-font-size)/var(--sys-font-label-medium-line-height) var(--sys-font-label-medium-font-family);
711
- --sys-font-label-medium-font-family: "Roboto", sans-serif;
713
+ --sys-font-label-medium-font-family: var(--sys-font-family-body);
712
714
  --sys-font-label-medium-font-size: 1rem;
713
715
  --sys-font-label-medium-font-weight: 600;
714
716
  --sys-font-label-medium-letter-spacing: 0px;
715
717
  --sys-font-label-medium-line-height: 1.2;
716
718
  --sys-font-label-medium-strong: var(--sys-font-label-medium-strong-font-weight) var(--sys-font-label-medium-strong-font-size)/var(--sys-font-label-medium-strong-line-height) var(--sys-font-label-medium-strong-font-family);
717
- --sys-font-label-medium-strong-font-family: "Roboto", sans-serif;
719
+ --sys-font-label-medium-strong-font-family: var(--sys-font-family-body);
718
720
  --sys-font-label-medium-strong-font-size: 1rem;
719
721
  --sys-font-label-medium-strong-font-weight: 800;
720
722
  --sys-font-label-medium-strong-letter-spacing: 0px;
721
723
  --sys-font-label-medium-strong-line-height: 1.2;
722
724
  --sys-font-label-small: var(--sys-font-label-small-font-weight) var(--sys-font-label-small-font-size)/var(--sys-font-label-small-line-height) var(--sys-font-label-small-font-family);
723
- --sys-font-label-small-font-family: "Roboto", sans-serif;
725
+ --sys-font-label-small-font-family: var(--sys-font-family-body);
724
726
  --sys-font-label-small-font-size: 0.917rem;
725
727
  --sys-font-label-small-font-weight: 600;
726
728
  --sys-font-label-small-letter-spacing: 0px;
727
729
  --sys-font-label-small-line-height: 1.2;
728
730
  --sys-font-label-small-strong: var(--sys-font-label-small-strong-font-weight) var(--sys-font-label-small-strong-font-size)/var(--sys-font-label-small-strong-line-height) var(--sys-font-label-small-strong-font-family);
729
- --sys-font-label-small-strong-font-family: "Roboto", sans-serif;
731
+ --sys-font-label-small-strong-font-family: var(--sys-font-family-body);
730
732
  --sys-font-label-small-strong-font-size: 0.917rem;
731
733
  --sys-font-label-small-strong-font-weight: 800;
732
734
  --sys-font-label-small-strong-letter-spacing: 0px;
@@ -915,79 +917,79 @@ html[data-theme="dark"] {
915
917
  --sys-focus-ring-offset: 2px;
916
918
  --sys-focus-ring-width: 3px;
917
919
  --sys-font-body-large: var(--sys-font-body-large-font-weight) var(--sys-font-body-large-font-size)/var(--sys-font-body-large-line-height) var(--sys-font-body-large-font-family);
918
- --sys-font-body-large-font-family: var(--ref-font-body-regular-2-font-family);
920
+ --sys-font-body-large-font-family: var(--sys-font-family-body);
919
921
  --sys-font-body-large-font-size: var(--ref-font-body-regular-2-font-size);
920
922
  --sys-font-body-large-font-weight: var(--ref-font-body-regular-2-font-weight);
921
923
  --sys-font-body-large-letter-spacing: var(--ref-font-body-regular-2-letter-spacing);
922
924
  --sys-font-body-large-line-height: var(--ref-font-body-regular-2-line-height);
923
925
  --sys-font-body-medium: var(--sys-font-body-medium-font-weight) var(--sys-font-body-medium-font-size)/var(--sys-font-body-medium-line-height) var(--sys-font-body-medium-font-family);
924
- --sys-font-body-medium-font-family: var(--ref-font-body-regular-1-font-family);
926
+ --sys-font-body-medium-font-family: var(--sys-font-family-body);
925
927
  --sys-font-body-medium-font-size: var(--ref-font-body-regular-1-font-size);
926
928
  --sys-font-body-medium-font-weight: var(--ref-font-body-regular-1-font-weight);
927
929
  --sys-font-body-medium-letter-spacing: var(--ref-font-body-regular-1-letter-spacing);
928
930
  --sys-font-body-medium-line-height: var(--ref-font-body-regular-1-line-height);
929
931
  --sys-font-body-medium-strong: var(--sys-font-body-medium-strong-font-weight) var(--sys-font-body-medium-strong-font-size)/var(--sys-font-body-medium-strong-line-height) var(--sys-font-body-medium-strong-font-family);
930
- --sys-font-body-medium-strong-font-family: var(--ref-font-body-semibold-1-font-family);
932
+ --sys-font-body-medium-strong-font-family: var(--sys-font-family-body);
931
933
  --sys-font-body-medium-strong-font-size: var(--ref-font-body-semibold-1-font-size);
932
934
  --sys-font-body-medium-strong-font-weight: var(--ref-font-body-semibold-1-font-weight);
933
935
  --sys-font-body-medium-strong-letter-spacing: var(--ref-font-body-semibold-1-letter-spacing);
934
936
  --sys-font-body-medium-strong-line-height: var(--ref-font-body-semibold-1-line-height);
935
937
  --sys-font-body-small: var(--sys-font-body-small-font-weight) var(--sys-font-body-small-font-size)/var(--sys-font-body-small-line-height) var(--sys-font-body-small-font-family);
936
- --sys-font-body-small-font-family: "Roboto", sans-serif;
938
+ --sys-font-body-small-font-family: var(--sys-font-family-body);
937
939
  --sys-font-body-small-font-size: 0.917rem;
938
940
  --sys-font-body-small-font-weight: 400;
939
941
  --sys-font-body-small-letter-spacing: 0px;
940
942
  --sys-font-body-small-line-height: 1.4;
941
943
  --sys-font-heading-large: var(--sys-font-heading-large-font-weight) var(--sys-font-heading-large-font-size)/var(--sys-font-heading-large-line-height) var(--sys-font-heading-large-font-family);
942
- --sys-font-heading-large-font-family: var(--ref-font-heading-bold-3-font-family);
944
+ --sys-font-heading-large-font-family: var(--sys-font-family-heading);
943
945
  --sys-font-heading-large-font-size: var(--ref-font-heading-bold-3-font-size);
944
946
  --sys-font-heading-large-font-weight: var(--ref-font-heading-bold-3-font-weight);
945
947
  --sys-font-heading-large-letter-spacing: var(--ref-font-heading-bold-3-letter-spacing);
946
948
  --sys-font-heading-large-line-height: var(--ref-font-heading-bold-3-line-height);
947
949
  --sys-font-heading-medium: var(--sys-font-heading-medium-font-weight) var(--sys-font-heading-medium-font-size)/var(--sys-font-heading-medium-line-height) var(--sys-font-heading-medium-font-family);
948
- --sys-font-heading-medium-font-family: var(--ref-font-heading-bold-2-font-family);
950
+ --sys-font-heading-medium-font-family: var(--sys-font-family-heading);
949
951
  --sys-font-heading-medium-font-size: var(--ref-font-heading-bold-2-font-size);
950
952
  --sys-font-heading-medium-font-weight: var(--ref-font-heading-bold-2-font-weight);
951
953
  --sys-font-heading-medium-letter-spacing: var(--ref-font-heading-bold-2-letter-spacing);
952
954
  --sys-font-heading-medium-line-height: var(--ref-font-heading-bold-2-line-height);
953
955
  --sys-font-heading-small: var(--sys-font-heading-small-font-weight) var(--sys-font-heading-small-font-size)/var(--sys-font-heading-small-line-height) var(--sys-font-heading-small-font-family);
954
- --sys-font-heading-small-font-family: var(--ref-font-heading-bold-1-font-family);
956
+ --sys-font-heading-small-font-family: var(--sys-font-family-heading);
955
957
  --sys-font-heading-small-font-size: var(--ref-font-heading-bold-1-font-size);
956
958
  --sys-font-heading-small-font-weight: var(--ref-font-heading-bold-1-font-weight);
957
959
  --sys-font-heading-small-letter-spacing: var(--ref-font-heading-bold-1-letter-spacing);
958
960
  --sys-font-heading-small-line-height: var(--ref-font-heading-bold-1-line-height);
959
961
  --sys-font-label-large: var(--sys-font-label-large-font-weight) var(--sys-font-label-large-font-size)/var(--sys-font-label-large-line-height) var(--sys-font-label-large-font-family);
960
- --sys-font-label-large-font-family: "Roboto", sans-serif;
962
+ --sys-font-label-large-font-family: var(--sys-font-family-body);
961
963
  --sys-font-label-large-font-size: 1.167rem;
962
964
  --sys-font-label-large-font-weight: 700;
963
965
  --sys-font-label-large-letter-spacing: 0px;
964
966
  --sys-font-label-large-line-height: 1.2;
965
967
  --sys-font-label-large-strong: var(--sys-font-label-large-strong-font-weight) var(--sys-font-label-large-strong-font-size)/var(--sys-font-label-large-strong-line-height) var(--sys-font-label-large-strong-font-family);
966
- --sys-font-label-large-strong-font-family: "Roboto", sans-serif;
968
+ --sys-font-label-large-strong-font-family: var(--sys-font-family-body);
967
969
  --sys-font-label-large-strong-font-size: 1.167rem;
968
970
  --sys-font-label-large-strong-font-weight: 800;
969
971
  --sys-font-label-large-strong-letter-spacing: 0px;
970
972
  --sys-font-label-large-strong-line-height: 1.2;
971
973
  --sys-font-label-medium: var(--sys-font-label-medium-font-weight) var(--sys-font-label-medium-font-size)/var(--sys-font-label-medium-line-height) var(--sys-font-label-medium-font-family);
972
- --sys-font-label-medium-font-family: "Roboto", sans-serif;
974
+ --sys-font-label-medium-font-family: var(--sys-font-family-body);
973
975
  --sys-font-label-medium-font-size: 1rem;
974
976
  --sys-font-label-medium-font-weight: 600;
975
977
  --sys-font-label-medium-letter-spacing: 0px;
976
978
  --sys-font-label-medium-line-height: 1.2;
977
979
  --sys-font-label-medium-strong: var(--sys-font-label-medium-strong-font-weight) var(--sys-font-label-medium-strong-font-size)/var(--sys-font-label-medium-strong-line-height) var(--sys-font-label-medium-strong-font-family);
978
- --sys-font-label-medium-strong-font-family: "Roboto", sans-serif;
980
+ --sys-font-label-medium-strong-font-family: var(--sys-font-family-body);
979
981
  --sys-font-label-medium-strong-font-size: 1rem;
980
982
  --sys-font-label-medium-strong-font-weight: 800;
981
983
  --sys-font-label-medium-strong-letter-spacing: 0px;
982
984
  --sys-font-label-medium-strong-line-height: 1.2;
983
985
  --sys-font-label-small: var(--sys-font-label-small-font-weight) var(--sys-font-label-small-font-size)/var(--sys-font-label-small-line-height) var(--sys-font-label-small-font-family);
984
- --sys-font-label-small-font-family: "Roboto", sans-serif;
986
+ --sys-font-label-small-font-family: var(--sys-font-family-body);
985
987
  --sys-font-label-small-font-size: 0.917rem;
986
988
  --sys-font-label-small-font-weight: 600;
987
989
  --sys-font-label-small-letter-spacing: 0px;
988
990
  --sys-font-label-small-line-height: 1.2;
989
991
  --sys-font-label-small-strong: var(--sys-font-label-small-strong-font-weight) var(--sys-font-label-small-strong-font-size)/var(--sys-font-label-small-strong-line-height) var(--sys-font-label-small-strong-font-family);
990
- --sys-font-label-small-strong-font-family: "Roboto", sans-serif;
992
+ --sys-font-label-small-strong-font-family: var(--sys-font-family-body);
991
993
  --sys-font-label-small-strong-font-size: 0.917rem;
992
994
  --sys-font-label-small-strong-font-weight: 800;
993
995
  --sys-font-label-small-strong-letter-spacing: 0px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@igne-agency/react-web-ui",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "IGNE's React web component kit: primitives and the presets over them, form controls in three tiers with a TanStack Form bridge, and DTCG tokens themed per app.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -341,7 +341,6 @@
341
341
  "docs:links": "bun .storybook/docs-links/report.ts"
342
342
  },
343
343
  "dependencies": {
344
- "@material-design-icons/svg": "^0.14.15",
345
344
  "@tanstack/react-virtual": "^3.14.26",
346
345
  "@zxcvbn-ts/core": "^4.2.0",
347
346
  "@zxcvbn-ts/language-common": "^4.1.3",
@@ -356,6 +355,7 @@
356
355
  "@lexical/history": "^0.53.0",
357
356
  "@lexical/plain-text": "^0.53.0",
358
357
  "@lexical/react": "^0.53.0",
358
+ "@material-design-icons/svg": "^0.14.15",
359
359
  "@shikijs/rehype": "^4.6.0",
360
360
  "@storybook/addon-a11y": "^10.6.5",
361
361
  "@storybook/addon-docs": "^10.6.5",
@@ -390,6 +390,7 @@
390
390
  "playwright": "^1.64.1",
391
391
  "react": "^19.3.1",
392
392
  "react-aria-components": "^1.22.1",
393
+ "react-docgen": "^8.0.4",
393
394
  "react-dom": "^19.3.1",
394
395
  "remark-gfm": "^4.0.1",
395
396
  "remark-mdx": "^3.1.1",