@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.30

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 (158) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/assets/images/img_avatar-rhds.svg +22 -0
  8. package/assets/images/pf-logo-avatar.jpg +0 -0
  9. package/base/patternfly-fonts.css +4 -4
  10. package/base/patternfly-fonts.scss +4 -4
  11. package/base/patternfly-variables.css +8 -6
  12. package/base/tokens/tokens-charts-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  14. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  15. package/base/tokens/tokens-charts.scss +1 -1
  16. package/base/tokens/tokens-dark.scss +1 -1
  17. package/base/tokens/tokens-default.scss +4 -4
  18. package/base/tokens/tokens-felt-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-glass.scss +3 -2
  21. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  22. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  23. package/base/tokens/tokens-felt.scss +1 -1
  24. package/base/tokens/tokens-glass-dark.scss +1 -1
  25. package/base/tokens/tokens-glass.scss +3 -2
  26. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  27. package/base/tokens/tokens-highcontrast.scss +4 -4
  28. package/base/tokens/tokens-palette.scss +1 -1
  29. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  30. package/components/AboutModalBox/about-modal-box.css +1 -1
  31. package/components/AboutModalBox/about-modal-box.scss +1 -1
  32. package/components/Accordion/accordion.css +3 -3
  33. package/components/Accordion/accordion.scss +3 -3
  34. package/components/Alert/alert.css +8 -7
  35. package/components/Alert/alert.scss +8 -7
  36. package/components/Avatar/avatar.css +144 -0
  37. package/components/Avatar/avatar.scss +161 -0
  38. package/components/Banner/banner.css +7 -0
  39. package/components/Banner/banner.scss +7 -0
  40. package/components/Breadcrumb/breadcrumb.css +3 -3
  41. package/components/Breadcrumb/breadcrumb.scss +3 -3
  42. package/components/Button/button.css +20 -4
  43. package/components/Button/button.scss +24 -5
  44. package/components/Card/card.css +4 -4
  45. package/components/Card/card.scss +4 -4
  46. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  47. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  48. package/components/DataList/data-list.css +5 -5
  49. package/components/DataList/data-list.scss +5 -5
  50. package/components/DragDrop/drag-drop.css +4 -0
  51. package/components/DragDrop/drag-drop.scss +4 -0
  52. package/components/DualListSelector/dual-list-selector.css +1 -1
  53. package/components/DualListSelector/dual-list-selector.scss +1 -1
  54. package/components/Form/form.scss +1 -0
  55. package/components/FormControl/form-control.css +12 -2
  56. package/components/FormControl/form-control.scss +14 -2
  57. package/components/Hint/hint.css +2 -2
  58. package/components/Hint/hint.scss +2 -2
  59. package/components/Label/label.css +9 -3
  60. package/components/Label/label.scss +9 -3
  61. package/components/Masthead/masthead.css +1 -1
  62. package/components/Masthead/masthead.scss +1 -1
  63. package/components/Menu/menu.css +2 -2
  64. package/components/Menu/menu.scss +3 -3
  65. package/components/MenuToggle/menu-toggle.css +3 -0
  66. package/components/MenuToggle/menu-toggle.scss +4 -1
  67. package/components/ModalBox/modal-box.css +4 -4
  68. package/components/ModalBox/modal-box.scss +5 -5
  69. package/components/Nav/nav.css +2 -2
  70. package/components/Nav/nav.scss +2 -2
  71. package/components/NotificationDrawer/notification-drawer.css +3 -3
  72. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  73. package/components/Page/page.css +25 -22
  74. package/components/Page/page.scss +28 -28
  75. package/components/Pagination/pagination.css +12 -7
  76. package/components/Pagination/pagination.scss +15 -12
  77. package/components/Panel/panel.css +1 -1
  78. package/components/Panel/panel.scss +2 -2
  79. package/components/Popover/popover.css +1 -1
  80. package/components/Popover/popover.scss +1 -1
  81. package/components/Progress/progress.css +2 -2
  82. package/components/Progress/progress.scss +2 -2
  83. package/components/Sidebar/sidebar.css +4 -7
  84. package/components/Sidebar/sidebar.scss +9 -9
  85. package/components/Table/table-grid.css +25 -13
  86. package/components/Table/table-grid.scss +10 -5
  87. package/components/Table/table-tree-view.css +3 -0
  88. package/components/Table/table-tree-view.scss +2 -0
  89. package/components/Table/table.css +55 -21
  90. package/components/Table/table.scss +82 -34
  91. package/components/Tabs/tabs.css +19 -5
  92. package/components/Tabs/tabs.scss +22 -5
  93. package/components/Title/title.css +1 -1
  94. package/components/Title/title.scss +1 -1
  95. package/components/Tooltip/tooltip.css +1 -1
  96. package/components/Tooltip/tooltip.scss +1 -1
  97. package/components/TreeView/tree-view.css +7 -7
  98. package/components/TreeView/tree-view.scss +7 -7
  99. package/components/Wizard/wizard.css +4 -4
  100. package/components/Wizard/wizard.scss +4 -4
  101. package/components/_index.css +399 -140
  102. package/docs/components/Avatar/examples/Avatar.css +6 -0
  103. package/docs/components/Avatar/examples/Avatar.md +414 -40
  104. package/docs/components/Button/examples/Button.md +2 -2
  105. package/docs/components/CodeEditor/examples/CodeEditor.md +131 -47
  106. package/docs/components/DataList/examples/DataList.md +143 -11
  107. package/docs/components/DatePicker/examples/DatePicker.md +26 -2
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +115 -55
  109. package/docs/components/Drawer/examples/Drawer.md +1 -1
  110. package/docs/components/DualListSelector/examples/DualListSelector.md +355 -139
  111. package/docs/components/EmptyState/examples/EmptyState.md +12 -12
  112. package/docs/components/FileUpload/examples/FileUpload.md +26 -2
  113. package/docs/components/Form/examples/Form.md +140 -16
  114. package/docs/components/FormControl/examples/FormControl.md +260 -20
  115. package/docs/components/HelperText/examples/HelperText.md +139 -11
  116. package/docs/components/Icon/examples/Icon.md +403 -31
  117. package/docs/components/InlineEdit/examples/InlineEdit.md +13 -1
  118. package/docs/components/InputGroup/examples/InputGroup.md +20 -8
  119. package/docs/components/Label/examples/Label.md +4029 -765
  120. package/docs/components/List/examples/List.md +78 -6
  121. package/docs/components/Login/examples/Login.md +104 -8
  122. package/docs/components/Menu/examples/Menu.md +221 -17
  123. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  124. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +247 -19
  125. package/docs/components/NumberInput/examples/NumberInput.md +301 -25
  126. package/docs/components/Pagination/examples/Pagination.md +111 -273
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +169 -13
  128. package/docs/components/Sidebar/examples/Sidebar.md +3 -1
  129. package/docs/components/Switch/examples/Switch.md +52 -4
  130. package/docs/components/Table/examples/Table.css +6 -0
  131. package/docs/components/Table/examples/Table.md +1322 -171
  132. package/docs/components/Tabs/examples/Tabs.md +18 -998
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +355 -115
  134. package/docs/components/Toolbar/examples/Toolbar.md +133 -25
  135. package/docs/components/TreeView/examples/TreeView.md +286 -118
  136. package/docs/components/Wizard/examples/Wizard.md +325 -25
  137. package/docs/demos/Alert/examples/Alert.md +181 -40
  138. package/docs/demos/Button/examples/Button.md +57 -45
  139. package/docs/demos/Card/examples/Card.md +280 -34
  140. package/docs/demos/CardView/examples/CardView.md +12 -12
  141. package/docs/demos/Compass/examples/Compass.md +91 -439
  142. package/docs/demos/Dashboard/examples/Dashboard.md +92 -41
  143. package/docs/demos/DataList/examples/DataList.md +74 -50
  144. package/docs/demos/Form/examples/BasicForms.md +112 -36
  145. package/docs/demos/HelperText/examples/HelperText.md +104 -8
  146. package/docs/demos/Masthead/examples/Masthead.md +52 -4
  147. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +176 -14
  148. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2570 -4968
  149. package/docs/demos/Table/examples/Table.md +407 -179
  150. package/docs/demos/Toolbar/examples/Toolbar.md +139 -46
  151. package/docs/demos/Wizard/examples/Wizard.md +117 -9
  152. package/package.json +7 -7
  153. package/patternfly-base-no-globals.css +12 -10
  154. package/patternfly-base.css +12 -10
  155. package/patternfly-no-globals.css +411 -150
  156. package/patternfly.css +411 -150
  157. package/patternfly.min.css +1 -1
  158. package/patternfly.min.css.map +1 -1
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -1110,11 +1110,24 @@ cssPrefix: pf-v6-c-menu-toggle
1110
1110
  ```html
1111
1111
  <button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
1112
1112
  <span class="pf-v6-c-menu-toggle__icon">
1113
- <img
1114
- class="pf-v6-c-avatar pf-m-sm"
1115
- alt="Avatar image"
1116
- src="/assets/images/img_avatar-light.svg"
1117
- />
1113
+ <div class="pf-v6-c-avatar pf-m-sm" role="img" aria-hidden="true">
1114
+ <svg
1115
+ aria-hidden="true"
1116
+ data-name="Layer 1"
1117
+ xmlns="http://www.w3.org/2000/svg"
1118
+ version="1.1"
1119
+ viewBox="0 0 36 36"
1120
+ >
1121
+ <path
1122
+ fill="currentColor"
1123
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
1124
+ />
1125
+ <path
1126
+ fill="currentColor"
1127
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
1128
+ />
1129
+ </svg>
1130
+ </div>
1118
1131
  </span>
1119
1132
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
1120
1133
  <span class="pf-v6-c-menu-toggle__controls">
@@ -1143,11 +1156,24 @@ cssPrefix: pf-v6-c-menu-toggle
1143
1156
  aria-expanded="true"
1144
1157
  >
1145
1158
  <span class="pf-v6-c-menu-toggle__icon">
1146
- <img
1147
- class="pf-v6-c-avatar pf-m-sm"
1148
- alt="Avatar image"
1149
- src="/assets/images/img_avatar-light.svg"
1150
- />
1159
+ <div class="pf-v6-c-avatar pf-m-sm" role="img" aria-hidden="true">
1160
+ <svg
1161
+ aria-hidden="true"
1162
+ data-name="Layer 1"
1163
+ xmlns="http://www.w3.org/2000/svg"
1164
+ version="1.1"
1165
+ viewBox="0 0 36 36"
1166
+ >
1167
+ <path
1168
+ fill="currentColor"
1169
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
1170
+ />
1171
+ <path
1172
+ fill="currentColor"
1173
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
1174
+ />
1175
+ </svg>
1176
+ </div>
1151
1177
  </span>
1152
1178
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
1153
1179
  <span class="pf-v6-c-menu-toggle__controls">
@@ -1177,11 +1203,24 @@ cssPrefix: pf-v6-c-menu-toggle
1177
1203
  disabled
1178
1204
  >
1179
1205
  <span class="pf-v6-c-menu-toggle__icon">
1180
- <img
1181
- class="pf-v6-c-avatar pf-m-sm"
1182
- alt="Avatar image"
1183
- src="/assets/images/img_avatar-light.svg"
1184
- />
1206
+ <div class="pf-v6-c-avatar pf-m-sm" role="img" aria-hidden="true">
1207
+ <svg
1208
+ aria-hidden="true"
1209
+ data-name="Layer 1"
1210
+ xmlns="http://www.w3.org/2000/svg"
1211
+ version="1.1"
1212
+ viewBox="0 0 36 36"
1213
+ >
1214
+ <path
1215
+ fill="currentColor"
1216
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
1217
+ />
1218
+ <path
1219
+ fill="currentColor"
1220
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
1221
+ />
1222
+ </svg>
1223
+ </div>
1185
1224
  </span>
1186
1225
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
1187
1226
  <span class="pf-v6-c-menu-toggle__controls">
package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md CHANGED
@@ -12,7 +12,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
12
12
  <div class="pf-v6-c-multiple-file-upload__main">
13
13
  <div class="pf-v6-c-multiple-file-upload__title">
14
14
  <div class="pf-v6-c-multiple-file-upload__title-icon">
15
- <i class="fas fa-upload" aria-hidden="true"></i>
15
+ <svg
16
+ class="pf-v6-svg"
17
+ fill="currentColor"
18
+ viewBox="0 0 32 32"
19
+ aria-hidden="true"
20
+ role="img"
21
+ width="1em"
22
+ height="1em"
23
+ >
24
+ <path
25
+ d="M11.293 6.707a.999.999 0 0 1 0-1.414l3.646-3.646a1.501 1.501 0 0 1 2.121 0l3.646 3.646a.999.999 0 1 1-1.414 1.414l-2.293-2.293V12a1 1 0 0 1-2 0V4.414l-2.293 2.293a.999.999 0 0 1-1.414 0ZM31 17.5v11c0 .827-.673 1.5-1.5 1.5h-27c-.827 0-1.5-.673-1.5-1.5v-11c0-.827.673-1.5 1.5-1.5h27c.827 0 1.5.673 1.5 1.5ZM14.125 23c0-.621-.504-1.125-1.125-1.125H8a1.125 1.125 0 0 0 0 2.25h5c.621 0 1.125-.504 1.125-1.125Zm10.755.016a1.874 1.874 0 1 0-3.749-.001 1.874 1.874 0 0 0 3.749.001Z"
26
+ />
27
+ </svg>
16
28
  </div>
17
29
  <div class="pf-v6-c-multiple-file-upload__title-text">
18
30
  Drag and drop files here
@@ -39,7 +51,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
39
51
  <div class="pf-v6-c-multiple-file-upload__main">
40
52
  <div class="pf-v6-c-multiple-file-upload__title">
41
53
  <div class="pf-v6-c-multiple-file-upload__title-icon">
42
- <i class="fas fa-upload" aria-hidden="true"></i>
54
+ <svg
55
+ class="pf-v6-svg"
56
+ fill="currentColor"
57
+ viewBox="0 0 32 32"
58
+ aria-hidden="true"
59
+ role="img"
60
+ width="1em"
61
+ height="1em"
62
+ >
63
+ <path
64
+ d="M11.293 6.707a.999.999 0 0 1 0-1.414l3.646-3.646a1.501 1.501 0 0 1 2.121 0l3.646 3.646a.999.999 0 1 1-1.414 1.414l-2.293-2.293V12a1 1 0 0 1-2 0V4.414l-2.293 2.293a.999.999 0 0 1-1.414 0ZM31 17.5v11c0 .827-.673 1.5-1.5 1.5h-27c-.827 0-1.5-.673-1.5-1.5v-11c0-.827.673-1.5 1.5-1.5h27c.827 0 1.5.673 1.5 1.5ZM14.125 23c0-.621-.504-1.125-1.125-1.125H8a1.125 1.125 0 0 0 0 2.25h5c.621 0 1.125-.504 1.125-1.125Zm10.755.016a1.874 1.874 0 1 0-3.749-.001 1.874 1.874 0 0 0 3.749.001Z"
65
+ />
66
+ </svg>
43
67
  </div>
44
68
  <div class="pf-v6-c-multiple-file-upload__title-text">
45
69
  Drag and drop files here
@@ -66,7 +90,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
66
90
  <div class="pf-v6-c-multiple-file-upload__main">
67
91
  <div class="pf-v6-c-multiple-file-upload__title">
68
92
  <div class="pf-v6-c-multiple-file-upload__title-icon">
69
- <i class="fas fa-upload" aria-hidden="true"></i>
93
+ <svg
94
+ class="pf-v6-svg"
95
+ fill="currentColor"
96
+ viewBox="0 0 32 32"
97
+ aria-hidden="true"
98
+ role="img"
99
+ width="1em"
100
+ height="1em"
101
+ >
102
+ <path
103
+ d="M11.293 6.707a.999.999 0 0 1 0-1.414l3.646-3.646a1.501 1.501 0 0 1 2.121 0l3.646 3.646a.999.999 0 1 1-1.414 1.414l-2.293-2.293V12a1 1 0 0 1-2 0V4.414l-2.293 2.293a.999.999 0 0 1-1.414 0ZM31 17.5v11c0 .827-.673 1.5-1.5 1.5h-27c-.827 0-1.5-.673-1.5-1.5v-11c0-.827.673-1.5 1.5-1.5h27c.827 0 1.5.673 1.5 1.5ZM14.125 23c0-.621-.504-1.125-1.125-1.125H8a1.125 1.125 0 0 0 0 2.25h5c.621 0 1.125-.504 1.125-1.125Zm10.755.016a1.874 1.874 0 1 0-3.749-.001 1.874 1.874 0 0 0 3.749.001Z"
104
+ />
105
+ </svg>
70
106
  </div>
71
107
  <div class="pf-v6-c-multiple-file-upload__title-text">
72
108
  Drag and drop files here
@@ -93,7 +129,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
93
129
  <div class="pf-v6-c-multiple-file-upload__main">
94
130
  <div class="pf-v6-c-multiple-file-upload__title">
95
131
  <div class="pf-v6-c-multiple-file-upload__title-icon">
96
- <i class="fas fa-upload" aria-hidden="true"></i>
132
+ <svg
133
+ class="pf-v6-svg"
134
+ fill="currentColor"
135
+ viewBox="0 0 32 32"
136
+ aria-hidden="true"
137
+ role="img"
138
+ width="1em"
139
+ height="1em"
140
+ >
141
+ <path
142
+ d="M11.293 6.707a.999.999 0 0 1 0-1.414l3.646-3.646a1.501 1.501 0 0 1 2.121 0l3.646 3.646a.999.999 0 1 1-1.414 1.414l-2.293-2.293V12a1 1 0 0 1-2 0V4.414l-2.293 2.293a.999.999 0 0 1-1.414 0ZM31 17.5v11c0 .827-.673 1.5-1.5 1.5h-27c-.827 0-1.5-.673-1.5-1.5v-11c0-.827.673-1.5 1.5-1.5h27c.827 0 1.5.673 1.5 1.5ZM14.125 23c0-.621-.504-1.125-1.125-1.125H8a1.125 1.125 0 0 0 0 2.25h5c.621 0 1.125-.504 1.125-1.125Zm10.755.016a1.874 1.874 0 1 0-3.749-.001 1.874 1.874 0 0 0 3.749.001Z"
143
+ />
144
+ </svg>
97
145
  </div>
98
146
  <div class="pf-v6-c-multiple-file-upload__title-text">
99
147
  Drag and drop files here
@@ -120,7 +168,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
120
168
  <div class="pf-v6-c-multiple-file-upload__main">
121
169
  <div class="pf-v6-c-multiple-file-upload__title">
122
170
  <div class="pf-v6-c-multiple-file-upload__title-icon">
123
- <i class="fas fa-upload" aria-hidden="true"></i>
171
+ <svg
172
+ class="pf-v6-svg"
173
+ fill="currentColor"
174
+ viewBox="0 0 32 32"
175
+ aria-hidden="true"
176
+ role="img"
177
+ width="1em"
178
+ height="1em"
179
+ >
180
+ <path
181
+ d="M11.293 6.707a.999.999 0 0 1 0-1.414l3.646-3.646a1.501 1.501 0 0 1 2.121 0l3.646 3.646a.999.999 0 1 1-1.414 1.414l-2.293-2.293V12a1 1 0 0 1-2 0V4.414l-2.293 2.293a.999.999 0 0 1-1.414 0ZM31 17.5v11c0 .827-.673 1.5-1.5 1.5h-27c-.827 0-1.5-.673-1.5-1.5v-11c0-.827.673-1.5 1.5-1.5h27c.827 0 1.5.673 1.5 1.5ZM14.125 23c0-.621-.504-1.125-1.125-1.125H8a1.125 1.125 0 0 0 0 2.25h5c.621 0 1.125-.504 1.125-1.125Zm10.755.016a1.874 1.874 0 1 0-3.749-.001 1.874 1.874 0 0 0 3.749.001Z"
182
+ />
183
+ </svg>
124
184
  </div>
125
185
  <div class="pf-v6-c-multiple-file-upload__title-text">
126
186
  Drag and drop files here
@@ -165,7 +225,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
165
225
  <span class="pf-v6-c-button__text">
166
226
  <div class="pf-v6-c-multiple-file-upload__status-progress">
167
227
  <div class="pf-v6-c-multiple-file-upload__status-progress-icon">
168
- <i class="fas fa-spinner" aria-hidden="true"></i>
228
+ <svg
229
+ class="pf-v6-svg"
230
+ fill="currentColor"
231
+ viewBox="0 0 32 32"
232
+ aria-hidden="true"
233
+ role="img"
234
+ width="1em"
235
+ height="1em"
236
+ >
237
+ <path
238
+ d="M31 16c0 8.271-6.729 15-15 15-.806 0-1.614-.064-2.401-.191a1 1 0 0 1 .318-1.974c.683.11 1.384.166 2.083.166 7.168 0 13-5.832 13-13S23.168 3 16 3a1 1 0 1 1 0-2c8.271 0 15 6.729 15 15ZM5.299 23.384a1 1 0 1 0-1.645 1.138 15.011 15.011 0 0 0 3.824 3.824.997.997 0 0 0 1.39-.253 1 1 0 0 0-.254-1.391 13.037 13.037 0 0 1-3.316-3.317ZM2 15a1 1 0 0 0-1 1c0 .802.064 1.61.191 2.401a1 1 0 1 0 1.974-.318A13.199 13.199 0 0 1 2.999 16a1 1 0 0 0-1-1Z"
239
+ />
240
+ </svg>
169
241
  </div>
170
242
  <div
171
243
  class="pf-v6-c-multiple-file-upload__status-progress-text"
@@ -184,7 +256,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
184
256
  <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
185
257
  <li class="pf-v6-c-multiple-file-upload__status-item">
186
258
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
187
- <i class="fas fa-file" aria-hidden="true"></i>
259
+ <svg
260
+ class="pf-v6-svg"
261
+ fill="currentColor"
262
+ viewBox="0 0 32 32"
263
+ aria-hidden="true"
264
+ role="img"
265
+ width="1em"
266
+ height="1em"
267
+ >
268
+ <path
269
+ d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
270
+ />
271
+ </svg>
188
272
  </div>
189
273
  <div class="pf-v6-c-multiple-file-upload__status-item-main">
190
274
  <div
@@ -247,7 +331,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
247
331
  </li>
248
332
  <li class="pf-v6-c-multiple-file-upload__status-item">
249
333
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
250
- <i class="fas fa-file" aria-hidden="true"></i>
334
+ <svg
335
+ class="pf-v6-svg"
336
+ fill="currentColor"
337
+ viewBox="0 0 32 32"
338
+ aria-hidden="true"
339
+ role="img"
340
+ width="1em"
341
+ height="1em"
342
+ >
343
+ <path
344
+ d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
345
+ />
346
+ </svg>
251
347
  </div>
252
348
  <div class="pf-v6-c-multiple-file-upload__status-item-main">
253
349
  <div
@@ -310,7 +406,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
310
406
  </li>
311
407
  <li class="pf-v6-c-multiple-file-upload__status-item">
312
408
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
313
- <i class="fas fa-file" aria-hidden="true"></i>
409
+ <svg
410
+ class="pf-v6-svg"
411
+ fill="currentColor"
412
+ viewBox="0 0 32 32"
413
+ aria-hidden="true"
414
+ role="img"
415
+ width="1em"
416
+ height="1em"
417
+ >
418
+ <path
419
+ d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
420
+ />
421
+ </svg>
314
422
  </div>
315
423
  <div class="pf-v6-c-multiple-file-upload__status-item-main">
316
424
  <div
@@ -386,7 +494,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
386
494
  <div class="pf-v6-c-multiple-file-upload__main">
387
495
  <div class="pf-v6-c-multiple-file-upload__title">
388
496
  <div class="pf-v6-c-multiple-file-upload__title-icon">
389
- <i class="fas fa-upload" aria-hidden="true"></i>
497
+ <svg
498
+ class="pf-v6-svg"
499
+ fill="currentColor"
500
+ viewBox="0 0 32 32"
501
+ aria-hidden="true"
502
+ role="img"
503
+ width="1em"
504
+ height="1em"
505
+ >
506
+ <path
507
+ d="M11.293 6.707a.999.999 0 0 1 0-1.414l3.646-3.646a1.501 1.501 0 0 1 2.121 0l3.646 3.646a.999.999 0 1 1-1.414 1.414l-2.293-2.293V12a1 1 0 0 1-2 0V4.414l-2.293 2.293a.999.999 0 0 1-1.414 0ZM31 17.5v11c0 .827-.673 1.5-1.5 1.5h-27c-.827 0-1.5-.673-1.5-1.5v-11c0-.827.673-1.5 1.5-1.5h27c.827 0 1.5.673 1.5 1.5ZM14.125 23c0-.621-.504-1.125-1.125-1.125H8a1.125 1.125 0 0 0 0 2.25h5c.621 0 1.125-.504 1.125-1.125Zm10.755.016a1.874 1.874 0 1 0-3.749-.001 1.874 1.874 0 0 0 3.749.001Z"
508
+ />
509
+ </svg>
390
510
  </div>
391
511
  <div class="pf-v6-c-multiple-file-upload__title-text">
392
512
  Drag and drop files here
@@ -431,7 +551,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
431
551
  <span class="pf-v6-c-button__text">
432
552
  <div class="pf-v6-c-multiple-file-upload__status-progress">
433
553
  <div class="pf-v6-c-multiple-file-upload__status-progress-icon">
434
- <i class="fas fa-spinner" aria-hidden="true"></i>
554
+ <svg
555
+ class="pf-v6-svg"
556
+ fill="currentColor"
557
+ viewBox="0 0 32 32"
558
+ aria-hidden="true"
559
+ role="img"
560
+ width="1em"
561
+ height="1em"
562
+ >
563
+ <path
564
+ d="M31 16c0 8.271-6.729 15-15 15-.806 0-1.614-.064-2.401-.191a1 1 0 0 1 .318-1.974c.683.11 1.384.166 2.083.166 7.168 0 13-5.832 13-13S23.168 3 16 3a1 1 0 1 1 0-2c8.271 0 15 6.729 15 15ZM5.299 23.384a1 1 0 1 0-1.645 1.138 15.011 15.011 0 0 0 3.824 3.824.997.997 0 0 0 1.39-.253 1 1 0 0 0-.254-1.391 13.037 13.037 0 0 1-3.316-3.317ZM2 15a1 1 0 0 0-1 1c0 .802.064 1.61.191 2.401a1 1 0 1 0 1.974-.318A13.199 13.199 0 0 1 2.999 16a1 1 0 0 0-1-1Z"
565
+ />
566
+ </svg>
435
567
  </div>
436
568
  <div
437
569
  class="pf-v6-c-multiple-file-upload__status-progress-text"
@@ -449,7 +581,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
449
581
  <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
450
582
  <li class="pf-v6-c-multiple-file-upload__status-item">
451
583
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
452
- <i class="fas fa-file" aria-hidden="true"></i>
584
+ <svg
585
+ class="pf-v6-svg"
586
+ fill="currentColor"
587
+ viewBox="0 0 32 32"
588
+ aria-hidden="true"
589
+ role="img"
590
+ width="1em"
591
+ height="1em"
592
+ >
593
+ <path
594
+ d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
595
+ />
596
+ </svg>
453
597
  </div>
454
598
  <div class="pf-v6-c-multiple-file-upload__status-item-main">
455
599
  <div
@@ -512,7 +656,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
512
656
  </li>
513
657
  <li class="pf-v6-c-multiple-file-upload__status-item">
514
658
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
515
- <i class="fas fa-file" aria-hidden="true"></i>
659
+ <svg
660
+ class="pf-v6-svg"
661
+ fill="currentColor"
662
+ viewBox="0 0 32 32"
663
+ aria-hidden="true"
664
+ role="img"
665
+ width="1em"
666
+ height="1em"
667
+ >
668
+ <path
669
+ d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
670
+ />
671
+ </svg>
516
672
  </div>
517
673
  <div class="pf-v6-c-multiple-file-upload__status-item-main">
518
674
  <div
@@ -575,7 +731,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
575
731
  </li>
576
732
  <li class="pf-v6-c-multiple-file-upload__status-item">
577
733
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
578
- <i class="fas fa-file" aria-hidden="true"></i>
734
+ <svg
735
+ class="pf-v6-svg"
736
+ fill="currentColor"
737
+ viewBox="0 0 32 32"
738
+ aria-hidden="true"
739
+ role="img"
740
+ width="1em"
741
+ height="1em"
742
+ >
743
+ <path
744
+ d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
745
+ />
746
+ </svg>
579
747
  </div>
580
748
  <div class="pf-v6-c-multiple-file-upload__status-item-main">
581
749
  <div
@@ -651,7 +819,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
651
819
  <div class="pf-v6-c-multiple-file-upload__main">
652
820
  <div class="pf-v6-c-multiple-file-upload__title">
653
821
  <div class="pf-v6-c-multiple-file-upload__title-icon">
654
- <i class="fas fa-upload" aria-hidden="true"></i>
822
+ <svg
823
+ class="pf-v6-svg"
824
+ fill="currentColor"
825
+ viewBox="0 0 32 32"
826
+ aria-hidden="true"
827
+ role="img"
828
+ width="1em"
829
+ height="1em"
830
+ >
831
+ <path
832
+ d="M11.293 6.707a.999.999 0 0 1 0-1.414l3.646-3.646a1.501 1.501 0 0 1 2.121 0l3.646 3.646a.999.999 0 1 1-1.414 1.414l-2.293-2.293V12a1 1 0 0 1-2 0V4.414l-2.293 2.293a.999.999 0 0 1-1.414 0ZM31 17.5v11c0 .827-.673 1.5-1.5 1.5h-27c-.827 0-1.5-.673-1.5-1.5v-11c0-.827.673-1.5 1.5-1.5h27c.827 0 1.5.673 1.5 1.5ZM14.125 23c0-.621-.504-1.125-1.125-1.125H8a1.125 1.125 0 0 0 0 2.25h5c.621 0 1.125-.504 1.125-1.125Zm10.755.016a1.874 1.874 0 1 0-3.749-.001 1.874 1.874 0 0 0 3.749.001Z"
833
+ />
834
+ </svg>
655
835
  </div>
656
836
  <div class="pf-v6-c-multiple-file-upload__title-text">
657
837
  Drag and drop files here
@@ -696,7 +876,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
696
876
  <span class="pf-v6-c-button__text">
697
877
  <div class="pf-v6-c-multiple-file-upload__status-progress">
698
878
  <div class="pf-v6-c-multiple-file-upload__status-progress-icon">
699
- <i class="fas fa-spinner" aria-hidden="true"></i>
879
+ <svg
880
+ class="pf-v6-svg"
881
+ fill="currentColor"
882
+ viewBox="0 0 32 32"
883
+ aria-hidden="true"
884
+ role="img"
885
+ width="1em"
886
+ height="1em"
887
+ >
888
+ <path
889
+ d="M31 16c0 8.271-6.729 15-15 15-.806 0-1.614-.064-2.401-.191a1 1 0 0 1 .318-1.974c.683.11 1.384.166 2.083.166 7.168 0 13-5.832 13-13S23.168 3 16 3a1 1 0 1 1 0-2c8.271 0 15 6.729 15 15ZM5.299 23.384a1 1 0 1 0-1.645 1.138 15.011 15.011 0 0 0 3.824 3.824.997.997 0 0 0 1.39-.253 1 1 0 0 0-.254-1.391 13.037 13.037 0 0 1-3.316-3.317ZM2 15a1 1 0 0 0-1 1c0 .802.064 1.61.191 2.401a1 1 0 1 0 1.974-.318A13.199 13.199 0 0 1 2.999 16a1 1 0 0 0-1-1Z"
890
+ />
891
+ </svg>
700
892
  </div>
701
893
  <div
702
894
  class="pf-v6-c-multiple-file-upload__status-progress-text"
@@ -714,7 +906,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
714
906
  <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
715
907
  <li class="pf-v6-c-multiple-file-upload__status-item">
716
908
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
717
- <i class="fas fa-file" aria-hidden="true"></i>
909
+ <svg
910
+ class="pf-v6-svg"
911
+ fill="currentColor"
912
+ viewBox="0 0 32 32"
913
+ aria-hidden="true"
914
+ role="img"
915
+ width="1em"
916
+ height="1em"
917
+ >
918
+ <path
919
+ d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
920
+ />
921
+ </svg>
718
922
  </div>
719
923
  <div class="pf-v6-c-multiple-file-upload__status-item-main">
720
924
  <div
@@ -777,7 +981,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
777
981
  </li>
778
982
  <li class="pf-v6-c-multiple-file-upload__status-item">
779
983
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
780
- <i class="fas fa-file" aria-hidden="true"></i>
984
+ <svg
985
+ class="pf-v6-svg"
986
+ fill="currentColor"
987
+ viewBox="0 0 32 32"
988
+ aria-hidden="true"
989
+ role="img"
990
+ width="1em"
991
+ height="1em"
992
+ >
993
+ <path
994
+ d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
995
+ />
996
+ </svg>
781
997
  </div>
782
998
  <div class="pf-v6-c-multiple-file-upload__status-item-main">
783
999
  <div
@@ -840,7 +1056,19 @@ cssPrefix: pf-v6-c-multiple-file-upload
840
1056
  </li>
841
1057
  <li class="pf-v6-c-multiple-file-upload__status-item">
842
1058
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
843
- <i class="fas fa-file" aria-hidden="true"></i>
1059
+ <svg
1060
+ class="pf-v6-svg"
1061
+ fill="currentColor"
1062
+ viewBox="0 0 32 32"
1063
+ aria-hidden="true"
1064
+ role="img"
1065
+ width="1em"
1066
+ height="1em"
1067
+ >
1068
+ <path
1069
+ d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
1070
+ />
1071
+ </svg>
844
1072
  </div>
845
1073
  <div class="pf-v6-c-multiple-file-upload__status-item-main">
846
1074
  <div