@commercetools-demo/puck-image-picker 0.4.1 → 0.6.1

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 (5) hide show
  1. package/dist/index.js +104 -122
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +102 -98
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +4 -21
package/dist/index.js CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
- var __create = Object.create;
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
6
  var __export = (target, all) => {
9
7
  for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
17
15
  }
18
16
  return to;
19
17
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
19
 
30
20
  // src/index.ts
@@ -229,17 +219,31 @@ var useMediaLibrary = () => {
229
219
  };
230
220
 
231
221
  // src/ImagePickerField.tsx
232
- var import_primary_button = __toESM(require("@commercetools-uikit/primary-button"));
233
- var import_secondary_button = __toESM(require("@commercetools-uikit/secondary-button"));
234
- var import_flat_button = __toESM(require("@commercetools-uikit/flat-button"));
235
- var import_secondary_icon_button = __toESM(require("@commercetools-uikit/secondary-icon-button"));
236
- var import_text_input = __toESM(require("@commercetools-uikit/text-input"));
237
- var import_label = __toESM(require("@commercetools-uikit/label"));
238
- var import_loading_spinner = __toESM(require("@commercetools-uikit/loading-spinner"));
239
- var import_spacings = __toESM(require("@commercetools-uikit/spacings"));
240
- var import_text = __toESM(require("@commercetools-uikit/text"));
241
- var import_icons = require("@commercetools-uikit/icons");
222
+ var import_nimbus2 = require("@commercetools/nimbus");
223
+ var import_nimbus_icons = require("@commercetools/nimbus-icons");
224
+
225
+ // src/EnsureNimbusProvider.tsx
226
+ var import_styled_system = require("@chakra-ui/react/styled-system");
227
+ var import_nimbus = require("@commercetools/nimbus");
242
228
  var import_jsx_runtime = require("react/jsx-runtime");
229
+ var SCOPED_SYSTEM_KEY = /* @__PURE__ */ Symbol.for(
230
+ "@commercetools-demo/puck:nimbus-scoped-system"
231
+ );
232
+ var globalScope = globalThis;
233
+ var scopedSystem = globalScope[SCOPED_SYSTEM_KEY] ?? (globalScope[SCOPED_SYSTEM_KEY] = (0, import_styled_system.createSystem)({
234
+ // `_config` is the fully-merged Nimbus + Chakra config used to build the
235
+ // stock system; reusing it keeps all Nimbus theming intact.
236
+ ...import_nimbus.system._config,
237
+ preflight: false,
238
+ globalCss: {}
239
+ }));
240
+ var EnsureNimbusProvider = ({
241
+ locale = "en",
242
+ children
243
+ }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_system.ChakraProvider, { value: scopedSystem, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_nimbus.NimbusI18nProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_nimbus._RegionProvider, { children }) }) });
244
+
245
+ // src/ImagePickerField.tsx
246
+ var import_jsx_runtime2 = require("react/jsx-runtime");
243
247
  var UploadModal = ({
244
248
  uploading,
245
249
  error,
@@ -262,7 +266,7 @@ var UploadModal = ({
262
266
  const f = e.dataTransfer.files[0];
263
267
  if (f) handleFile(f);
264
268
  };
265
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
269
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
266
270
  "div",
267
271
  {
268
272
  style: {
@@ -275,7 +279,7 @@ var UploadModal = ({
275
279
  justifyContent: "center"
276
280
  },
277
281
  onClick: (e) => e.target === e.currentTarget && onClose(),
278
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
282
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
279
283
  "div",
280
284
  {
281
285
  style: {
@@ -289,7 +293,7 @@ var UploadModal = ({
289
293
  boxShadow: "0 20px 60px rgba(0,0,0,0.3)"
290
294
  },
291
295
  children: [
292
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
296
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
293
297
  "div",
294
298
  {
295
299
  style: {
@@ -300,45 +304,35 @@ var UploadModal = ({
300
304
  borderBottom: "1px solid #e5e7eb"
301
305
  },
302
306
  children: [
303
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Subheadline, { as: "h4", isBold: true, children: "Upload a file" }),
304
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
305
- import_secondary_icon_button.default,
306
- {
307
- icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {}),
308
- label: "Close",
309
- onClick: onClose,
310
- size: "small"
311
- }
312
- )
307
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Text, { as: "h4", fontSize: "xl", fontWeight: "700", children: "Upload a file" }),
308
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.IconButton, { "aria-label": "Close", variant: "ghost", size: "xs", onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus_icons.Close, {}) })
313
309
  ]
314
310
  }
315
311
  ),
316
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, overflow: "auto", padding: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "m", children: [
317
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "xs", children: [
318
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.default, { htmlFor: "upload-title", children: "Title" }),
319
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
320
- import_text_input.default,
312
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, overflow: "auto", padding: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Stack, { direction: "column", gap: "400", children: [
313
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.FormField.Root, { children: [
314
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.FormField.Label, { children: "Title" }),
315
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.FormField.Input, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
316
+ import_nimbus2.TextInput,
321
317
  {
322
- id: "upload-title",
323
318
  value: title,
324
- onChange: (e) => setTitle(e.target.value),
319
+ onChange: (value) => setTitle(value),
325
320
  placeholder: "File title"
326
321
  }
327
- )
322
+ ) })
328
323
  ] }),
329
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "xs", children: [
330
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.default, { htmlFor: "upload-description", children: "Description" }),
331
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
332
- import_text_input.default,
324
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.FormField.Root, { children: [
325
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.FormField.Label, { children: "Description" }),
326
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.FormField.Input, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
327
+ import_nimbus2.TextInput,
333
328
  {
334
- id: "upload-description",
335
329
  value: description,
336
- onChange: (e) => setDescription(e.target.value),
330
+ onChange: (value) => setDescription(value),
337
331
  placeholder: "Optional description"
338
332
  }
339
- )
333
+ ) })
340
334
  ] }),
341
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
335
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
342
336
  "div",
343
337
  {
344
338
  style: {
@@ -359,17 +353,17 @@ var UploadModal = ({
359
353
  onDragLeave: () => setDragging(false),
360
354
  onDrop: handleDrop,
361
355
  children: [
362
- file ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
363
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
356
+ file ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
357
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
364
358
  "\u{1F4CE} ",
365
359
  file.name
366
360
  ] }),
367
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "11px", marginTop: "4px", color: "#9ca3af" }, children: [
361
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: "11px", marginTop: "4px", color: "#9ca3af" }, children: [
368
362
  (file.size / 1024).toFixed(0),
369
363
  " KB"
370
364
  ] })
371
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "\u{1F4C1} Click or drag & drop to select a file" }),
372
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
365
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "\u{1F4C1} Click or drag & drop to select a file" }),
366
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
373
367
  "input",
374
368
  {
375
369
  ref: inputRef,
@@ -385,9 +379,9 @@ var UploadModal = ({
385
379
  ]
386
380
  }
387
381
  ),
388
- error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "negative", children: error })
382
+ error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Text, { color: "critical.11", children: error })
389
383
  ] }) }),
390
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
384
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
391
385
  "div",
392
386
  {
393
387
  style: {
@@ -399,15 +393,16 @@ var UploadModal = ({
399
393
  gap: "12px"
400
394
  },
401
395
  children: [
402
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Detail, { tone: "secondary", truncate: true, children: file?.name ?? "No file selected" }),
403
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Inline, { scale: "s", children: [
404
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_secondary_button.default, { label: "Cancel", onClick: onClose }),
405
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
406
- import_primary_button.default,
396
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Text, { fontSize: "sm", color: "neutral.11", truncate: true, children: file?.name ?? "No file selected" }),
397
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Stack, { direction: "row", gap: "200", children: [
398
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Button, { variant: "outline", onPress: onClose, children: "Cancel" }),
399
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
400
+ import_nimbus2.Button,
407
401
  {
408
- label: uploading ? "Uploading\u2026" : "Upload",
402
+ variant: "solid",
409
403
  isDisabled: !file || uploading,
410
- onClick: () => file && onUpload(file, title, description)
404
+ onPress: () => file && onUpload(file, title, description),
405
+ children: uploading ? "Uploading\u2026" : "Upload"
411
406
  }
412
407
  )
413
408
  ] })
@@ -434,7 +429,7 @@ var LibraryModal = ({
434
429
  const handleConfirm = () => {
435
430
  if (selected) onSelect(selected);
436
431
  };
437
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
432
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
438
433
  "div",
439
434
  {
440
435
  style: {
@@ -447,7 +442,7 @@ var LibraryModal = ({
447
442
  justifyContent: "center"
448
443
  },
449
444
  onClick: (e) => e.target === e.currentTarget && onClose(),
450
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
445
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
451
446
  "div",
452
447
  {
453
448
  style: {
@@ -461,7 +456,7 @@ var LibraryModal = ({
461
456
  boxShadow: "0 20px 60px rgba(0,0,0,0.3)"
462
457
  },
463
458
  children: [
464
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
459
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
465
460
  "div",
466
461
  {
467
462
  style: {
@@ -472,22 +467,14 @@ var LibraryModal = ({
472
467
  borderBottom: "1px solid #e5e7eb"
473
468
  },
474
469
  children: [
475
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Subheadline, { as: "h4", isBold: true, children: "Select from Media Library" }),
476
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
477
- import_secondary_icon_button.default,
478
- {
479
- icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {}),
480
- label: "Close",
481
- onClick: onClose,
482
- size: "small"
483
- }
484
- )
470
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Text, { as: "h4", fontSize: "xl", fontWeight: "700", children: "Select from Media Library" }),
471
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.IconButton, { "aria-label": "Close", variant: "ghost", size: "xs", onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus_icons.Close, {}) })
485
472
  ]
486
473
  }
487
474
  ),
488
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "20px" }, children: [
489
- loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading_spinner.default, {}) }) : files.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "secondary", children: "No files found." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "m", children: [
490
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
475
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "20px" }, children: [
476
+ loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.LoadingSpinner, {}) }) : files.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Text, { color: "neutral.11", children: "No files found." }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Stack, { direction: "column", gap: "400", children: [
477
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
491
478
  "div",
492
479
  {
493
480
  style: {
@@ -495,7 +482,7 @@ var LibraryModal = ({
495
482
  gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
496
483
  gap: "12px"
497
484
  },
498
- children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
485
+ children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
499
486
  "div",
500
487
  {
501
488
  style: {
@@ -511,14 +498,14 @@ var LibraryModal = ({
511
498
  onClick: () => setSelected(file),
512
499
  title: file.title ?? file.name,
513
500
  children: [
514
- file.isImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
501
+ file.isImage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
515
502
  "img",
516
503
  {
517
504
  src: file.url,
518
505
  alt: file.name,
519
506
  style: { width: "80px", height: "80px", objectFit: "cover", borderRadius: "4px", background: "#e5e7eb" }
520
507
  }
521
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
508
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
522
509
  "div",
523
510
  {
524
511
  style: {
@@ -534,7 +521,7 @@ var LibraryModal = ({
534
521
  children: "\u{1F4C4}"
535
522
  }
536
523
  ),
537
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
524
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
538
525
  "div",
539
526
  {
540
527
  style: {
@@ -556,35 +543,37 @@ var LibraryModal = ({
556
543
  ))
557
544
  }
558
545
  ),
559
- pagination.totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Inline, { alignItems: "center", justifyContent: "center", scale: "s", children: [
560
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
561
- import_secondary_button.default,
546
+ pagination.totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Stack, { direction: "row", gap: "200", alignItems: "center", justifyContent: "center", children: [
547
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
548
+ import_nimbus2.Button,
562
549
  {
563
- label: "\u2190 Prev",
550
+ variant: "outline",
551
+ size: "sm",
564
552
  isDisabled: pagination.currentPage <= 1,
565
- onClick: onPrevPage,
566
- size: "small"
553
+ onPress: onPrevPage,
554
+ children: "\u2190 Prev"
567
555
  }
568
556
  ),
569
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_text.default.Detail, { tone: "secondary", children: [
557
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Text, { fontSize: "sm", color: "neutral.11", children: [
570
558
  pagination.currentPage,
571
559
  " / ",
572
560
  pagination.totalPages
573
561
  ] }),
574
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
575
- import_secondary_button.default,
562
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
563
+ import_nimbus2.Button,
576
564
  {
577
- label: "Next \u2192",
565
+ variant: "outline",
566
+ size: "sm",
578
567
  isDisabled: pagination.currentPage >= pagination.totalPages,
579
- onClick: onNextPage,
580
- size: "small"
568
+ onPress: onNextPage,
569
+ children: "Next \u2192"
581
570
  }
582
571
  )
583
572
  ] })
584
573
  ] }),
585
- error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Body, { tone: "negative", children: error })
574
+ error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Text, { color: "critical.11", children: error })
586
575
  ] }),
587
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
576
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
588
577
  "div",
589
578
  {
590
579
  style: {
@@ -596,17 +585,10 @@ var LibraryModal = ({
596
585
  gap: "12px"
597
586
  },
598
587
  children: [
599
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Detail, { tone: "secondary", truncate: true, children: selected ? selected.title ?? selected.name : "Nothing selected" }),
600
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Inline, { scale: "s", children: [
601
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_secondary_button.default, { label: "Cancel", onClick: onClose }),
602
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
603
- import_primary_button.default,
604
- {
605
- label: "Select",
606
- isDisabled: !selected,
607
- onClick: handleConfirm
608
- }
609
- )
588
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Text, { fontSize: "sm", color: "neutral.11", truncate: true, children: selected ? selected.title ?? selected.name : "Nothing selected" }),
589
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Stack, { direction: "row", gap: "200", children: [
590
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Button, { variant: "outline", onPress: onClose, children: "Cancel" }),
591
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Button, { variant: "solid", isDisabled: !selected, onPress: handleConfirm, children: "Select" })
610
592
  ] })
611
593
  ]
612
594
  }
@@ -665,8 +647,8 @@ var ImagePickerField = ({
665
647
  window.addEventListener("keydown", onKey);
666
648
  return () => window.removeEventListener("keydown", onKey);
667
649
  }, []);
668
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Stack, { scale: "s", children: [
669
- value ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
650
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EnsureNimbusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Stack, { direction: "column", gap: "200", children: [
651
+ value ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
670
652
  "div",
671
653
  {
672
654
  style: {
@@ -679,7 +661,7 @@ var ImagePickerField = ({
679
661
  background: "#f9fafb"
680
662
  },
681
663
  children: [
682
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
664
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
683
665
  "img",
684
666
  {
685
667
  src: value,
@@ -687,16 +669,16 @@ var ImagePickerField = ({
687
669
  style: { width: "48px", height: "48px", objectFit: "cover", borderRadius: "4px", flexShrink: 0 }
688
670
  }
689
671
  ),
690
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Detail, { tone: "secondary", truncate: true, children: value }) }),
691
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_flat_button.default, { tone: "critical", label: "Remove", onClick: () => onChange("") })
672
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Text, { fontSize: "sm", color: "neutral.11", truncate: true, children: value }) }),
673
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Button, { variant: "ghost", colorPalette: "critical", size: "xs", onPress: () => onChange(""), children: "Remove" })
692
674
  ]
693
675
  }
694
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.default.Detail, { tone: "secondary", children: "No image selected" }),
695
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_spacings.default.Inline, { scale: "s", children: [
696
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_secondary_button.default, { label: "Upload", onClick: () => setShowUpload(true) }),
697
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primary_button.default, { label: "Media Library", onClick: openLibrary })
676
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Text, { fontSize: "sm", color: "neutral.11", children: "No image selected" }),
677
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_nimbus2.Stack, { direction: "row", gap: "200", children: [
678
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Button, { variant: "outline", onPress: () => setShowUpload(true), children: "Upload" }),
679
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_nimbus2.Button, { variant: "solid", onPress: openLibrary, children: "Media Library" })
698
680
  ] }),
699
- showUpload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
681
+ showUpload && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
700
682
  UploadModal,
701
683
  {
702
684
  uploading,
@@ -706,7 +688,7 @@ var ImagePickerField = ({
706
688
  onClose: () => setShowUpload(false)
707
689
  }
708
690
  ),
709
- showLibrary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
691
+ showLibrary && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
710
692
  LibraryModal,
711
693
  {
712
694
  files,
@@ -719,11 +701,11 @@ var ImagePickerField = ({
719
701
  onClose: () => setShowLibrary(false)
720
702
  }
721
703
  )
722
- ] });
704
+ ] }) });
723
705
  };
724
706
 
725
707
  // src/context/ImagePickerProvider.tsx
726
- var import_jsx_runtime2 = require("react/jsx-runtime");
708
+ var import_jsx_runtime3 = require("react/jsx-runtime");
727
709
  var ImagePickerProvider = ({
728
710
  children,
729
711
  baseURL,
@@ -731,7 +713,7 @@ var ImagePickerProvider = ({
731
713
  businessUnitKey,
732
714
  jwtToken
733
715
  }) => {
734
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
716
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
735
717
  ImagePickerContext.Provider,
736
718
  {
737
719
  value: { baseURL, projectKey, businessUnitKey, jwtToken },