react-file-upload-ui 0.1.3 → 0.1.6

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 (4) hide show
  1. package/dist/index.js +260 -112
  2. package/dist/index.mjs +260 -112
  3. package/dist/styles.css +1 -1
  4. package/package.json +5 -2
package/dist/index.mjs CHANGED
@@ -91,13 +91,141 @@ var ProgressBarComponent_default = ProgressBarComponent;
91
91
  // src/components/FileList/index.tsx
92
92
  import { useState as useState2, useEffect as useEffect2 } from "react";
93
93
 
94
+ // src/components/svg/PdfIcon.tsx
95
+ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
96
+ var PdfIcon = ({ className = "w-10 h-10" }) => /* @__PURE__ */ jsxs2(
97
+ "svg",
98
+ {
99
+ viewBox: "0 0 24 24",
100
+ fill: "none",
101
+ xmlns: "http://www.w3.org/2000/svg",
102
+ className,
103
+ children: [
104
+ /* @__PURE__ */ jsx3(
105
+ "path",
106
+ {
107
+ d: "M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z",
108
+ stroke: "#EF4444",
109
+ strokeWidth: "2",
110
+ strokeLinecap: "round",
111
+ strokeLinejoin: "round"
112
+ }
113
+ ),
114
+ /* @__PURE__ */ jsx3(
115
+ "path",
116
+ {
117
+ d: "M14 2V8H20",
118
+ stroke: "#EF4444",
119
+ strokeWidth: "2",
120
+ strokeLinecap: "round",
121
+ strokeLinejoin: "round"
122
+ }
123
+ ),
124
+ /* @__PURE__ */ jsx3(
125
+ "path",
126
+ {
127
+ d: "M12 18V12",
128
+ stroke: "#EF4444",
129
+ strokeWidth: "2",
130
+ strokeLinecap: "round",
131
+ strokeLinejoin: "round"
132
+ }
133
+ ),
134
+ /* @__PURE__ */ jsx3(
135
+ "path",
136
+ {
137
+ d: "M9 15H15",
138
+ stroke: "#EF4444",
139
+ strokeWidth: "2",
140
+ strokeLinecap: "round",
141
+ strokeLinejoin: "round"
142
+ }
143
+ )
144
+ ]
145
+ }
146
+ );
147
+ var PdfIcon_default = PdfIcon;
148
+
149
+ // src/components/svg/DocIcon.tsx
150
+ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
151
+ var DocIcon = ({ className = "w-10 h-10" }) => /* @__PURE__ */ jsxs3(
152
+ "svg",
153
+ {
154
+ viewBox: "0 0 24 24",
155
+ fill: "none",
156
+ xmlns: "http://www.w3.org/2000/svg",
157
+ className,
158
+ children: [
159
+ /* @__PURE__ */ jsx4(
160
+ "path",
161
+ {
162
+ d: "M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z",
163
+ stroke: "#3B82F6",
164
+ strokeWidth: "2",
165
+ strokeLinecap: "round",
166
+ strokeLinejoin: "round"
167
+ }
168
+ ),
169
+ /* @__PURE__ */ jsx4(
170
+ "path",
171
+ {
172
+ d: "M14 2V8H20",
173
+ stroke: "#3B82F6",
174
+ strokeWidth: "2",
175
+ strokeLinecap: "round",
176
+ strokeLinejoin: "round"
177
+ }
178
+ ),
179
+ /* @__PURE__ */ jsx4(
180
+ "path",
181
+ {
182
+ d: "M8 13H16",
183
+ stroke: "#3B82F6",
184
+ strokeWidth: "2",
185
+ strokeLinecap: "round",
186
+ strokeLinejoin: "round"
187
+ }
188
+ ),
189
+ /* @__PURE__ */ jsx4(
190
+ "path",
191
+ {
192
+ d: "M8 17H16",
193
+ stroke: "#3B82F6",
194
+ strokeWidth: "2",
195
+ strokeLinecap: "round",
196
+ strokeLinejoin: "round"
197
+ }
198
+ ),
199
+ /* @__PURE__ */ jsx4(
200
+ "path",
201
+ {
202
+ d: "M10 9H8",
203
+ stroke: "#3B82F6",
204
+ strokeWidth: "2",
205
+ strokeLinecap: "round",
206
+ strokeLinejoin: "round"
207
+ }
208
+ )
209
+ ]
210
+ }
211
+ );
212
+ var DocIcon_default = DocIcon;
213
+
94
214
  // src/components/FileList/MainPreview.tsx
95
- import { jsx as jsx3 } from "react/jsx-runtime";
215
+ import { jsx as jsx5 } from "react/jsx-runtime";
96
216
  function MainPreview({ selectedFile }) {
97
217
  if (!selectedFile) {
98
218
  return null;
99
219
  }
100
- return /* @__PURE__ */ jsx3("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl", children: /* @__PURE__ */ jsx3(
220
+ const isPdf = selectedFile.type === "application/pdf" || selectedFile.name.toLowerCase().endsWith(".pdf");
221
+ const isDoc = selectedFile.type === "application/msword" || selectedFile.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || selectedFile.name.toLowerCase().match(/\.(doc|docx)$/);
222
+ if (isPdf) {
223
+ return /* @__PURE__ */ jsx5("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsx5(PdfIcon_default, { className: "w-20 h-20" }) });
224
+ }
225
+ if (isDoc) {
226
+ return /* @__PURE__ */ jsx5("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsx5(DocIcon_default, { className: "w-20 h-20" }) });
227
+ }
228
+ return /* @__PURE__ */ jsx5("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl", children: /* @__PURE__ */ jsx5(
101
229
  "img",
102
230
  {
103
231
  src: selectedFile.preview,
@@ -109,9 +237,9 @@ function MainPreview({ selectedFile }) {
109
237
  var MainPreview_default = MainPreview;
110
238
 
111
239
  // src/components/svg/CrossIcon.tsx
112
- import { jsx as jsx4 } from "react/jsx-runtime";
240
+ import { jsx as jsx6 } from "react/jsx-runtime";
113
241
  function CrossIcon({ ...props }) {
114
- return /* @__PURE__ */ jsx4(
242
+ return /* @__PURE__ */ jsx6(
115
243
  "svg",
116
244
  {
117
245
  className: "w-3 h-3",
@@ -119,7 +247,7 @@ function CrossIcon({ ...props }) {
119
247
  stroke: "currentColor",
120
248
  viewBox: "0 0 24 24",
121
249
  ...props,
122
- children: /* @__PURE__ */ jsx4(
250
+ children: /* @__PURE__ */ jsx6(
123
251
  "path",
124
252
  {
125
253
  strokeLinecap: "round",
@@ -134,9 +262,9 @@ function CrossIcon({ ...props }) {
134
262
  var CrossIcon_default = CrossIcon;
135
263
 
136
264
  // src/components/svg/PlusIcon.tsx
137
- import { jsx as jsx5 } from "react/jsx-runtime";
265
+ import { jsx as jsx7 } from "react/jsx-runtime";
138
266
  function PlusIcon({ ...props }) {
139
- return /* @__PURE__ */ jsx5(
267
+ return /* @__PURE__ */ jsx7(
140
268
  "svg",
141
269
  {
142
270
  className: "w-8 h-8",
@@ -144,7 +272,7 @@ function PlusIcon({ ...props }) {
144
272
  stroke: "currentColor",
145
273
  viewBox: "0 0 24 24",
146
274
  ...props,
147
- children: /* @__PURE__ */ jsx5(
275
+ children: /* @__PURE__ */ jsx7(
148
276
  "path",
149
277
  {
150
278
  strokeLinecap: "round",
@@ -159,24 +287,24 @@ function PlusIcon({ ...props }) {
159
287
  var PlusIcon_default = PlusIcon;
160
288
 
161
289
  // src/components/FileList/AddFileButton.tsx
162
- import { jsx as jsx6 } from "react/jsx-runtime";
290
+ import { jsx as jsx8 } from "react/jsx-runtime";
163
291
  function AddFileButton({ onAddFile }) {
164
- return /* @__PURE__ */ jsx6(
292
+ return /* @__PURE__ */ jsx8(
165
293
  "button",
166
294
  {
167
295
  onClick: onAddFile,
168
296
  className: "shrink-0 cursor-pointer w-16 h-16 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center text-gray-400 hover:text-blue-500 hover:border-blue-500 hover:bg-blue-50 transition-all",
169
297
  type: "button",
170
- children: /* @__PURE__ */ jsx6(PlusIcon_default, {})
298
+ children: /* @__PURE__ */ jsx8(PlusIcon_default, {})
171
299
  }
172
300
  );
173
301
  }
174
302
  var AddFileButton_default = AddFileButton;
175
303
 
176
304
  // src/components/svg/CheckIcon.tsx
177
- import { jsx as jsx7 } from "react/jsx-runtime";
305
+ import { jsx as jsx9 } from "react/jsx-runtime";
178
306
  function CheckIcon({ ...props }) {
179
- return /* @__PURE__ */ jsx7(
307
+ return /* @__PURE__ */ jsx9(
180
308
  "svg",
181
309
  {
182
310
  className: "w-6 h-6",
@@ -184,7 +312,7 @@ function CheckIcon({ ...props }) {
184
312
  stroke: "currentColor",
185
313
  viewBox: "0 0 24 24",
186
314
  ...props,
187
- children: /* @__PURE__ */ jsx7(
315
+ children: /* @__PURE__ */ jsx9(
188
316
  "path",
189
317
  {
190
318
  strokeLinecap: "round",
@@ -199,28 +327,28 @@ function CheckIcon({ ...props }) {
199
327
  var CheckIcon_default = CheckIcon;
200
328
 
201
329
  // src/components/svg/StarIcon.tsx
202
- import { jsx as jsx8 } from "react/jsx-runtime";
330
+ import { jsx as jsx10 } from "react/jsx-runtime";
203
331
  function StarIcon({ ...props }) {
204
- return /* @__PURE__ */ jsx8("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ jsx8("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
332
+ return /* @__PURE__ */ jsx10("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ jsx10("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
205
333
  }
206
334
  var StarIcon_default = StarIcon;
207
335
 
208
336
  // src/components/FileList/SetDefaultButton.tsx
209
- import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
337
+ import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
210
338
  function SetDefaultButton({
211
339
  selectedFile,
212
340
  onSetDefault
213
341
  }) {
214
342
  const isDefault = selectedFile.isDefault;
215
- return /* @__PURE__ */ jsxs2(
343
+ return /* @__PURE__ */ jsxs4(
216
344
  "button",
217
345
  {
218
346
  onClick: () => onSetDefault(selectedFile.id),
219
347
  className: `w-40 flex items-center justify-center cursor-pointer gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${isDefault ? "bg-green-100 text-green-700 border border-green-200 hover:bg-green-200" : "bg-white border border-gray-200 text-gray-600 hover:border-blue-500 hover:text-blue-600 hover:bg-blue-50"}`,
220
348
  type: "button",
221
349
  children: [
222
- isDefault ? /* @__PURE__ */ jsx9(CheckIcon_default, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx9(StarIcon_default, { className: "w-4 h-4 opacity-60" }),
223
- /* @__PURE__ */ jsx9("span", { children: isDefault ? "Default Image" : "Set as Default" })
350
+ isDefault ? /* @__PURE__ */ jsx11(CheckIcon_default, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx11(StarIcon_default, { className: "w-4 h-4 opacity-60" }),
351
+ /* @__PURE__ */ jsx11("span", { children: isDefault ? "Default Image" : "Set as Default" })
224
352
  ]
225
353
  }
226
354
  );
@@ -228,9 +356,9 @@ function SetDefaultButton({
228
356
  var SetDefaultButton_default = SetDefaultButton;
229
357
 
230
358
  // src/components/svg/TrashIcon.tsx
231
- import { jsx as jsx10 } from "react/jsx-runtime";
359
+ import { jsx as jsx12 } from "react/jsx-runtime";
232
360
  function TrashIcon({ ...props }) {
233
- return /* @__PURE__ */ jsx10(
361
+ return /* @__PURE__ */ jsx12(
234
362
  "svg",
235
363
  {
236
364
  className: "w-6 h-6",
@@ -238,7 +366,7 @@ function TrashIcon({ ...props }) {
238
366
  stroke: "currentColor",
239
367
  viewBox: "0 0 24 24",
240
368
  ...props,
241
- children: /* @__PURE__ */ jsx10(
369
+ children: /* @__PURE__ */ jsx12(
242
370
  "path",
243
371
  {
244
372
  strokeLinecap: "round",
@@ -253,17 +381,17 @@ function TrashIcon({ ...props }) {
253
381
  var TrashIcon_default = TrashIcon;
254
382
 
255
383
  // src/components/FileList/ClearAllFile.tsx
256
- import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
384
+ import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
257
385
  function ClearAllFile({ onClearAll }) {
258
- return /* @__PURE__ */ jsxs3(
386
+ return /* @__PURE__ */ jsxs5(
259
387
  "button",
260
388
  {
261
389
  onClick: onClearAll,
262
390
  className: "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-white border border-gray-200 text-gray-600 hover:border-red-500 hover:text-red-600 hover:bg-red-50 transition-all duration-200 w-full justify-center",
263
391
  title: "Clear all files",
264
392
  children: [
265
- /* @__PURE__ */ jsx11(TrashIcon_default, { className: "w-4 h-4" }),
266
- /* @__PURE__ */ jsx11("span", { children: "Clear All" })
393
+ /* @__PURE__ */ jsx13(TrashIcon_default, { className: "w-4 h-4" }),
394
+ /* @__PURE__ */ jsx13("span", { children: "Clear All" })
267
395
  ]
268
396
  }
269
397
  );
@@ -271,7 +399,7 @@ function ClearAllFile({ onClearAll }) {
271
399
  var ClearAllFile_default = ClearAllFile;
272
400
 
273
401
  // src/components/FileList/index.tsx
274
- import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
402
+ import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
275
403
  var FileList = ({
276
404
  files,
277
405
  removeFile,
@@ -293,79 +421,83 @@ var FileList = ({
293
421
  return null;
294
422
  }
295
423
  const selectedFile = files.find((f) => f.id === selectedFileId) || files[0];
296
- return /* @__PURE__ */ jsxs4("div", { className: "space-y-4 p-3", children: [
297
- /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-center gap-6", children: [
298
- /* @__PURE__ */ jsx12(MainPreview_default, { selectedFile }),
299
- /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
300
- /* @__PURE__ */ jsx12(
424
+ return /* @__PURE__ */ jsxs6("div", { className: "space-y-4 p-3", children: [
425
+ /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-center gap-6", children: [
426
+ /* @__PURE__ */ jsx14(MainPreview_default, { selectedFile }),
427
+ /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
428
+ /* @__PURE__ */ jsx14(
301
429
  SetDefaultButton_default,
302
430
  {
303
431
  selectedFile,
304
432
  onSetDefault: setAsDefault
305
433
  }
306
434
  ),
307
- /* @__PURE__ */ jsx12(ClearAllFile_default, { onClearAll: clearAll })
435
+ /* @__PURE__ */ jsx14(ClearAllFile_default, { onClearAll: clearAll })
308
436
  ] })
309
437
  ] }),
310
- /* @__PURE__ */ jsxs4("div", { className: "w-full flex flex-wrap items-center gap-1", children: [
311
- files.map((file) => /* @__PURE__ */ jsxs4("div", { className: "relative group/thumb", children: [
312
- /* @__PURE__ */ jsxs4(
313
- "button",
314
- {
315
- onClick: () => setSelectedFileId(file.id),
316
- className: `relative cursor-pointer w-16 h-16 p-0.5 rounded-lg overflow-hidden border transition-all ${selectedFileId === file.id ? "border-gray-300" : "border-transparent hover:border-gray-100"}`,
317
- children: [
318
- file.preview ? /* @__PURE__ */ jsx12(
319
- "img",
320
- {
321
- src: file.preview,
322
- alt: file.name,
323
- className: "w-full h-full object-cover"
324
- }
325
- ) : /* @__PURE__ */ jsx12("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ jsx12(
326
- "svg",
327
- {
328
- className: "w-6 h-6 text-gray-400",
329
- fill: "none",
330
- stroke: "currentColor",
331
- viewBox: "0 0 24 24",
332
- children: /* @__PURE__ */ jsx12(
333
- "path",
334
- {
335
- strokeLinecap: "round",
336
- strokeLinejoin: "round",
337
- strokeWidth: 2,
338
- d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
339
- }
340
- )
341
- }
342
- ) }),
343
- file.isDefault && /* @__PURE__ */ jsx12("div", { className: "absolute top-1 left-1 p-0.5 bg-yellow-400 rounded-full", children: /* @__PURE__ */ jsx12(
344
- "svg",
345
- {
346
- className: "w-3 h-3 text-white",
347
- fill: "currentColor",
348
- viewBox: "0 0 20 20",
349
- children: /* @__PURE__ */ jsx12("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
350
- }
351
- ) })
352
- ]
353
- }
354
- ),
355
- /* @__PURE__ */ jsx12(
356
- "button",
357
- {
358
- onClick: (e) => {
359
- e.stopPropagation();
360
- removeFile(file.id);
361
- },
362
- className: "absolute cursor-pointer -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity shadow-sm hover:bg-red-600 z-10",
363
- title: "Remove file",
364
- children: /* @__PURE__ */ jsx12(CrossIcon_default, {})
365
- }
366
- )
367
- ] }, file.id)),
368
- /* @__PURE__ */ jsx12(AddFileButton_default, { onAddFile })
438
+ /* @__PURE__ */ jsxs6("div", { className: "w-full flex flex-wrap items-center gap-1", children: [
439
+ files.map((file) => {
440
+ const isPdf = file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
441
+ const isDoc = file.type === "application/msword" || file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || file.name.toLowerCase().match(/\.(doc|docx)$/);
442
+ return /* @__PURE__ */ jsxs6("div", { className: "relative group/thumb", children: [
443
+ /* @__PURE__ */ jsxs6(
444
+ "button",
445
+ {
446
+ onClick: () => setSelectedFileId(file.id),
447
+ className: `relative cursor-pointer w-16 h-16 p-0.5 rounded-lg overflow-hidden border transition-all ${selectedFileId === file.id ? "border-gray-300" : "border-transparent hover:border-gray-100"}`,
448
+ children: [
449
+ isPdf ? /* @__PURE__ */ jsx14("div", { className: "w-full h-full bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ jsx14(PdfIcon_default, { className: "w-8 h-8" }) }) : isDoc ? /* @__PURE__ */ jsx14("div", { className: "w-full h-full bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ jsx14(DocIcon_default, { className: "w-8 h-8" }) }) : file.preview ? /* @__PURE__ */ jsx14(
450
+ "img",
451
+ {
452
+ src: file.preview,
453
+ alt: file.name,
454
+ className: "w-full h-full object-cover"
455
+ }
456
+ ) : /* @__PURE__ */ jsx14("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ jsx14(
457
+ "svg",
458
+ {
459
+ className: "w-6 h-6 text-gray-400",
460
+ fill: "none",
461
+ stroke: "currentColor",
462
+ viewBox: "0 0 24 24",
463
+ children: /* @__PURE__ */ jsx14(
464
+ "path",
465
+ {
466
+ strokeLinecap: "round",
467
+ strokeLinejoin: "round",
468
+ strokeWidth: 2,
469
+ d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
470
+ }
471
+ )
472
+ }
473
+ ) }),
474
+ file.isDefault && /* @__PURE__ */ jsx14("div", { className: "absolute top-1 left-1 p-0.5 bg-yellow-400 rounded-full", children: /* @__PURE__ */ jsx14(
475
+ "svg",
476
+ {
477
+ className: "w-3 h-3 text-white",
478
+ fill: "currentColor",
479
+ viewBox: "0 0 20 20",
480
+ children: /* @__PURE__ */ jsx14("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
481
+ }
482
+ ) })
483
+ ]
484
+ }
485
+ ),
486
+ /* @__PURE__ */ jsx14(
487
+ "button",
488
+ {
489
+ onClick: (e) => {
490
+ e.stopPropagation();
491
+ removeFile(file.id);
492
+ },
493
+ className: "absolute cursor-pointer -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity shadow-sm hover:bg-red-600 z-10",
494
+ title: "Remove file",
495
+ children: /* @__PURE__ */ jsx14(CrossIcon_default, {})
496
+ }
497
+ )
498
+ ] }, file.id);
499
+ }),
500
+ /* @__PURE__ */ jsx14(AddFileButton_default, { onAddFile })
369
501
  ] })
370
502
  ] });
371
503
  };
@@ -657,16 +789,16 @@ var handleDrop = (e, setIsDragging, handleFiles, disabled) => {
657
789
  };
658
790
 
659
791
  // src/components/svg/UploadIcon.tsx
660
- import { jsx as jsx13 } from "react/jsx-runtime";
792
+ import { jsx as jsx15 } from "react/jsx-runtime";
661
793
  function UploadIcon({ ...props }) {
662
- return /* @__PURE__ */ jsx13(
794
+ return /* @__PURE__ */ jsx15(
663
795
  "svg",
664
796
  {
665
797
  fill: "none",
666
798
  stroke: "currentColor",
667
799
  viewBox: "0 0 24 24",
668
800
  ...props,
669
- children: /* @__PURE__ */ jsx13(
801
+ children: /* @__PURE__ */ jsx15(
670
802
  "path",
671
803
  {
672
804
  strokeLinecap: "round",
@@ -681,7 +813,7 @@ function UploadIcon({ ...props }) {
681
813
  var UploadIcon_default = UploadIcon;
682
814
 
683
815
  // src/components/LabelUI.tsx
684
- import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
816
+ import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
685
817
  function LabelUI({
686
818
  accept,
687
819
  isDragging,
@@ -689,21 +821,21 @@ function LabelUI({
689
821
  maxFiles = 10,
690
822
  disabled = false
691
823
  }) {
692
- return /* @__PURE__ */ jsxs5("div", { className: "p-6", children: [
693
- /* @__PURE__ */ jsx14("div", { className: "mb-3 flex justify-center", children: /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(
824
+ return /* @__PURE__ */ jsxs7("div", { className: "p-6", children: [
825
+ /* @__PURE__ */ jsx16("div", { className: "mb-3 flex justify-center", children: /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
694
826
  UploadIcon_default,
695
827
  {
696
828
  className: `w-8 h-8 transition-colors duration-200 ${isDragging && !disabled ? "text-blue-500" : "text-gray-400"}`
697
829
  }
698
830
  ) }) }),
699
- /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold text-gray-700 mb-1", children: isDragging && !disabled ? "Drop files here" : "Drag & drop files" }),
700
- /* @__PURE__ */ jsx14("p", { className: "text-sm text-gray-500 mb-3", children: "or click to browse" }),
701
- /* @__PURE__ */ jsxs5("div", { className: "text-xs text-gray-400 space-y-1", children: [
702
- accept && /* @__PURE__ */ jsxs5("p", { children: [
831
+ /* @__PURE__ */ jsx16("h3", { className: "text-lg font-semibold text-gray-700 mb-1", children: isDragging && !disabled ? "Drop files here" : "Drag & drop files" }),
832
+ /* @__PURE__ */ jsx16("p", { className: "text-sm text-gray-500 mb-3", children: "or click to browse" }),
833
+ /* @__PURE__ */ jsxs7("div", { className: "text-xs text-gray-400 space-y-1", children: [
834
+ accept && /* @__PURE__ */ jsxs7("p", { children: [
703
835
  "Accepted: ",
704
836
  accept
705
837
  ] }),
706
- /* @__PURE__ */ jsxs5("p", { children: [
838
+ /* @__PURE__ */ jsxs7("p", { children: [
707
839
  "Max size: ",
708
840
  formatFileSize(maxSize),
709
841
  " \u2022 Max files: ",
@@ -715,7 +847,7 @@ function LabelUI({
715
847
  var LabelUI_default = LabelUI;
716
848
 
717
849
  // src/index.tsx
718
- import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
850
+ import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
719
851
  var ReactFileUploaderUI = ({
720
852
  accept,
721
853
  multiple = true,
@@ -758,12 +890,12 @@ var ReactFileUploaderUI = ({
758
890
  handleDrop(e, setIsDragging, handleFiles, disabled);
759
891
  };
760
892
  const hasFiles = files.length > 0;
761
- return /* @__PURE__ */ jsxs6(
893
+ return /* @__PURE__ */ jsxs8(
762
894
  "div",
763
895
  {
764
896
  className: `w-full border-gray-200 border border-dashed rounded-xl relative ${className}`,
765
897
  children: [
766
- /* @__PURE__ */ jsxs6(
898
+ /* @__PURE__ */ jsxs8(
767
899
  "div",
768
900
  {
769
901
  className: `
@@ -790,7 +922,7 @@ var ReactFileUploaderUI = ({
790
922
  }
791
923
  },
792
924
  children: [
793
- /* @__PURE__ */ jsx15(
925
+ /* @__PURE__ */ jsx17(
794
926
  "input",
795
927
  {
796
928
  ref: fileInputRef,
@@ -803,7 +935,7 @@ var ReactFileUploaderUI = ({
803
935
  "aria-label": "File input"
804
936
  }
805
937
  ),
806
- !hasFiles && /* @__PURE__ */ jsx15(
938
+ !hasFiles && /* @__PURE__ */ jsx17(
807
939
  LabelUI_default,
808
940
  {
809
941
  accept,
@@ -817,7 +949,7 @@ var ReactFileUploaderUI = ({
817
949
  ]
818
950
  }
819
951
  ),
820
- /* @__PURE__ */ jsx15(
952
+ /* @__PURE__ */ jsx17(
821
953
  FileList_default,
822
954
  {
823
955
  files,
@@ -831,8 +963,8 @@ var ReactFileUploaderUI = ({
831
963
  }
832
964
  }
833
965
  ),
834
- files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ jsx15(ProgressBarComponent_default, { uploadProgress }),
835
- error && /* @__PURE__ */ jsx15(ErrorComponent_default, { error, setError })
966
+ files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ jsx17(ProgressBarComponent_default, { uploadProgress }),
967
+ error && /* @__PURE__ */ jsx17(ErrorComponent_default, { error, setError })
836
968
  ]
837
969
  }
838
970
  );
@@ -841,3 +973,19 @@ var index_default = ReactFileUploaderUI;
841
973
  export {
842
974
  index_default as default
843
975
  };
976
+
977
+ // Injected CSS
978
+ if (typeof document !== 'undefined') {
979
+ try {
980
+ const styleId = 'react-file-upload-ui-styles';
981
+ if (!document.getElementById(styleId)) {
982
+ const style = document.createElement('style');
983
+ style.id = styleId;
984
+ style.textContent = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
985
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-yellow-400:oklch(85.2% .199 91.936);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-700:oklch(52.7% .154 150.069);--color-blue-50:oklch(97% .014 254.604);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--radius-xl:.75rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.-top-2{top:calc(var(--spacing)*-2)}.top-1{top:calc(var(--spacing)*1)}.-right-2{right:calc(var(--spacing)*-2)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.left-1{left:calc(var(--spacing)*1)}.z-10{z-index:10}.-mt-1{margin-top:calc(var(--spacing)*-1)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-3{margin-top:calc(var(--spacing)*3)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.flex{display:flex}.hidden{display:none}.h-1{height:calc(var(--spacing)*1)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-16{height:calc(var(--spacing)*16)}.h-20{height:calc(var(--spacing)*20)}.h-\\[180px\\]{height:180px}.h-full{height:100%}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-16{width:calc(var(--spacing)*16)}.w-20{width:calc(var(--spacing)*20)}.w-40{width:calc(var(--spacing)*40)}.w-\\[180px\\]{width:180px}.w-full{width:100%}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.scale-\\[1\\.01\\]{scale:1.01}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-transparent{border-color:#0000}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-green-100{background-color:var(--color-green-100)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-500{background-color:var(--color-red-500)}.bg-white{background-color:var(--color-white)}.bg-yellow-400{background-color:var(--color-yellow-400)}.object-cover{object-fit:cover}.p-0\\.5{padding:calc(var(--spacing)*.5)}.p-1\\.5{padding:calc(var(--spacing)*1.5)}.p-3{padding:calc(var(--spacing)*3)}.p-6{padding:calc(var(--spacing)*6)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-500{color:var(--color-blue-500)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-green-700{color:var(--color-green-700)}.text-red-500{color:var(--color-red-500)}.text-red-700{color:var(--color-red-700)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.opacity-100{opacity:1}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media (hover:hover){.group-hover\\/thumb\\:opacity-100:is(:where(.group\\/thumb):hover *){opacity:1}.hover\\:border-blue-400:hover{border-color:var(--color-blue-400)}.hover\\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\\:border-gray-100:hover{border-color:var(--color-gray-100)}.hover\\:border-red-500:hover{border-color:var(--color-red-500)}.hover\\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-green-200:hover{background-color:var(--color-green-200)}.hover\\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\\:bg-red-600:hover{background-color:var(--color-red-600)}.hover\\:text-blue-500:hover{color:var(--color-blue-500)}.hover\\:text-blue-600:hover{color:var(--color-blue-600)}.hover\\:text-red-600:hover{color:var(--color-red-600)}.hover\\:text-red-700:hover{color:var(--color-red-700)}}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.animate-shake{animation:.5s ease-in-out shake}.animate-slideIn{animation:.3s ease-out forwards slideIn}.animate-scaleIn{animation:.3s ease-out forwards scaleIn}.animate-shimmer{animation:2s infinite shimmer}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}`;
986
+ document.head.appendChild(style);
987
+ }
988
+ } catch (e) {
989
+ console.error('Failed to inject react-file-upload-ui styles:', e);
990
+ }
991
+ }