@the-portland-company/shell 0.16.1 → 0.16.2

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 (6) hide show
  1. package/dist/chrome.css +35 -0
  2. package/dist/native.cjs +54 -50
  3. package/dist/native.cjs.map +1 -1
  4. package/dist/native.js +54 -50
  5. package/dist/native.js.map +1 -1
  6. package/package.json +1 -1
package/dist/native.js CHANGED
@@ -2,6 +2,7 @@
2
2
  import { useTopBarIconSlotGlyph, resolveBrandGlyph } from './chunk-NV6WHTEZ.js';
3
3
  import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, writeThemeCookie } from './chunk-ZZWM7BZZ.js';
4
4
  import { createContext, useState, useEffect, useCallback, useContext, useRef, useMemo } from 'react';
5
+ import { createPortal } from 'react-dom';
5
6
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
6
7
 
7
8
  function topBarIconButtonClass(tone = "default") {
@@ -432,66 +433,69 @@ function SupportAction() {
432
433
  ]
433
434
  }
434
435
  ),
435
- open ? /* @__PURE__ */ jsx(
436
- "div",
437
- {
438
- className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
439
- role: "dialog",
440
- "aria-modal": "true",
441
- "aria-label": "Support request",
442
- onMouseDown: (e) => {
443
- if (e.target === e.currentTarget) close();
444
- },
445
- children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-2xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-6 shadow-[var(--shadow-soft)]", children: [
446
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
447
- state === "sent" ? /* @__PURE__ */ jsxs(Fragment, { children: [
448
- /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
449
- /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsx(
450
- "button",
451
- {
452
- type: "button",
453
- onClick: close,
454
- className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90",
455
- children: "Done"
456
- }
457
- ) })
458
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
459
- /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
460
- /* @__PURE__ */ jsx(
461
- "textarea",
462
- {
463
- value: message,
464
- onChange: (e) => setMessage(e.target.value),
465
- rows: 5,
466
- placeholder: "How can we help?",
467
- className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-race-red)]"
468
- }
469
- ),
470
- state === "error" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
471
- /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
472
- /* @__PURE__ */ jsx(
436
+ open && typeof document !== "undefined" ? createPortal(
437
+ /* @__PURE__ */ jsx(
438
+ "div",
439
+ {
440
+ className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
441
+ role: "dialog",
442
+ "aria-modal": "true",
443
+ "aria-label": "Support request",
444
+ onMouseDown: (e) => {
445
+ if (e.target === e.currentTarget) close();
446
+ },
447
+ children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-2xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-6 shadow-[var(--shadow-soft)]", children: [
448
+ /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
449
+ state === "sent" ? /* @__PURE__ */ jsxs(Fragment, { children: [
450
+ /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
451
+ /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsx(
473
452
  "button",
474
453
  {
475
454
  type: "button",
476
455
  onClick: close,
477
- className: "rounded-full border border-[color:var(--line)] px-4 py-2 text-sm font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
478
- children: "Cancel"
456
+ className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90",
457
+ children: "Done"
479
458
  }
480
- ),
459
+ ) })
460
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
461
+ /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
481
462
  /* @__PURE__ */ jsx(
482
- "button",
463
+ "textarea",
483
464
  {
484
- type: "button",
485
- onClick: submit,
486
- disabled: !message.trim() || state === "sending",
487
- className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
488
- children: state === "sending" ? "Sending\u2026" : "Send request"
465
+ value: message,
466
+ onChange: (e) => setMessage(e.target.value),
467
+ rows: 5,
468
+ placeholder: "How can we help?",
469
+ className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-race-red)]"
489
470
  }
490
- )
471
+ ),
472
+ state === "error" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
473
+ /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
474
+ /* @__PURE__ */ jsx(
475
+ "button",
476
+ {
477
+ type: "button",
478
+ onClick: close,
479
+ className: "rounded-full border border-[color:var(--line)] px-4 py-2 text-sm font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
480
+ children: "Cancel"
481
+ }
482
+ ),
483
+ /* @__PURE__ */ jsx(
484
+ "button",
485
+ {
486
+ type: "button",
487
+ onClick: submit,
488
+ disabled: !message.trim() || state === "sending",
489
+ className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
490
+ children: state === "sending" ? "Sending\u2026" : "Send request"
491
+ }
492
+ )
493
+ ] })
491
494
  ] })
492
495
  ] })
493
- ] })
494
- }
496
+ }
497
+ ),
498
+ document.body
495
499
  ) : null
496
500
  ] });
497
501
  }