@planningcenter/organization-avatars 1.6.3 → 1.8.0

package/README.md

@@ -2,15 +2,42 @@
 
 This package provides an `OrganizationAvatars` React component which encapsulates displaying and updating an organization's avatar.
 
-See [the component's type signature](https://github.com/planningcenter/organization-avatars/blob/main/src/types.ts) for up-to-date props.
-
 ## Usage
 
-If no `darkModeAvatarUrl` is provided, the `avatarUrl` will be rendered with dark styles in the dark mode avatar's UI slot.
+```tsx
+import { OrganizationAvatars } from "@planningcenter/organization-avatars"
+import "@planningcenter/organization-avatars/style.css"
+
+<OrganizationAvatars
+  orgName="Demo Church"
+  avatarUrl="https://example.com/avatar.png"
+  darkModeAvatarUrl="https://example.com/avatar-dark.png"
+  showDarkModeAvatar
+  onAvatarUpdate={(mode, newUrl) => console.log(mode, newUrl)}
+/>
+```
+
+To see a working example, see the [`/organization` page in Accounts](https://accounts.planningcenteronline.com/organization). The `OrganizationAvatars` component is mounted in [the `_church_information` partial](https://github.com/planningcenter/accounts/blob/main/app/views/organization/show/_church_information.html.erb).
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `orgName` | `string` | **required** | The organization name, used for avatar alt text. |
+| `avatarUrl` | `string` | `undefined` | URL of the current light mode avatar. When no `darkModeAvatarUrl` is provided, this is also used for the dark mode slot. |
+| `darkModeAvatarUrl` | `string` | `undefined` | URL of the current dark mode avatar. Falls back to `avatarUrl` if not set. |
+| `showDarkModeAvatar` | `boolean` | `false` | Whether to render the dark mode avatar UI alongside the light mode avatar. Intended to be controlled by a feature flag. |
+| `onAvatarUpdate` | `(mode: AvatarMode, newUrl: string) => void` | `undefined` | Callback fired after a successful upload or delete. `mode` is `"avatar"` or `"dark_mode_avatar"`. `newUrl` is the new URL (or `""` on delete). |
+| `pcoEnv` | `Environment` | `undefined` | Planning Center environment override (`"production"`, `"staging"`, `"development"`, `"test"`, `"prototype"`). When omitted, the environment is inferred automatically. |
+| `readOnly` | `boolean` | `false` | Disables the edit button, preventing uploads and deletes. |
+
+### Types
 
-The `showDarkModeAvatar` prop gates the rendering of the dark mode avatar UI. It is intended to be controlled by a feature flag, and will eventually be removed when dark mode avatars have been rolled out.
+```ts
+type AvatarMode = "avatar" | "dark_mode_avatar"
 
-To see an example of how this package can be used, see the [`/organization` page in Accounts](https://accounts.planningcenteronline.com/organization). The `OrganizationAvatars` component is mounted in [the `_church_information` partial](https://github.com/planningcenter/accounts/blob/main/app/views/organization/show/_church_information.html.erb).
+type Environment = "production" | "staging" | "development" | "test" | "prototype"
+```
 
 ## Development
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),M=require("react-dom"),B=require("@planningcenter/url"),A=require("@planningcenter/tapestry"),x=require("@planningcenter/icons/paths/general"),O=require("@planningcenter/icons/paths/services"),P=require("react-dropzone");function z(a){var o,t,r="";if(typeof a=="string"||typeof a=="number")r+=a;else if(typeof a=="object")if(Array.isArray(a)){var l=a.length;for(o=0;o<l;o++)a[o]&&(t=z(a[o]))&&(r&&(r+=" "),r+=t)}else for(t in a)a[t]&&(r&&(r+=" "),r+=t);return r}function T(){for(var a,o,t=0,r="",l=arguments.length;t<l;t++)(a=arguments[t])&&(o=z(a))&&(r&&(r+=" "),r+=o);return r}function $(){const a=document.querySelector('meta[name="csrf-token"]');if(!a||!a.content)throw new Error('CSRF token not found. Ensure your Rails application includes <meta name="csrf-token" content="..."> in the document head.');return a.content}function L(a){const o=a.split("");return[o.shift()?.toUpperCase(),o.join("")].join("")}const I=a=>a==="dark_mode_avatar"?"dark":"light";function S({avatarUrl:a,organization:o,mode:t,pcoEnv:r,readOnly:l,onAvatarUpdate:j}){const[s,g]=i.useState(null),[c,_]=i.useState(!1),[d,f]=i.useState(!1),[b,u]=i.useState(""),p=i.useId(),v=i.useRef(null),y=I(t),F=h=>{const[n]=h;n&&g(Object.assign(n,{preview:URL.createObjectURL(n)}))};i.useEffect(()=>()=>{s?.preview&&(URL.revokeObjectURL(s.preview),u(""))},[s]);const N=async h=>{const n=await fetch(B.pcoApiUrl("accounts",{env:r}),{method:"PATCH",headers:{"Content-Type":"application/json","X-CSRF-Token":$(),Accept:"application/json"},body:JSON.stringify({data:{attributes:h}})}),m=await n.json();if(!n.ok)throw m;return m},R=async h=>{if(h.preventDefault(),!(!s||c||d)){_(!0);try{const n=new FileReader,m=await new Promise((w,k)=>{n.onloadend=()=>w(n.result),n.onerror=k,n.readAsDataURL(s)}),C=await N({[t]:m,[`${t}_cache`]:""});g(null),j(t,C.data.attributes[t].url),v.current?.close()}catch{u("We were unable to save your avatar.")}finally{_(!1)}}},U=async()=>{if(!(c||d)){f(!0);try{await N({[`remove_${t}`]:"1"}),j(t,""),v.current?.close()}catch{u("We were unable to delete your avatar.")}finally{f(!1)}}},q=()=>{g(null),u("")};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pco-org-avatar",children:[e.jsx("button",{type:"button",onClick:()=>v.current?.showModal(),disabled:l,className:`pco-org-avatar__button pco-org-avatar__button--${y}`,children:a?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:a,alt:`Church logo for ${o}`}),e.jsx("div",{className:"tds-btn tds-btn--interaction tds-btn--icononly",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:x.pencil})})})]}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"48",height:"48",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:O.image})}),e.jsx("div",{className:"tds-btn tds-btn--interaction tds-btn--icononly",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:x.pencil})})})]})}),e.jsxs("div",{className:"pco-org-avatar__label",children:[L(y)," mode"]})]}),M.createPortal(e.jsx("dialog",{id:p,ref:v,className:"pco-org-avatar__dialog",onClose:q,children:e.jsxs("form",{onSubmit:R,children:[e.jsxs("div",{className:"pco-org-avatar__dialog-header",children:[e.jsxs("h1",{className:"pco-org-avatar__dialog-title",children:["Church logo — ",y," mode"]}),e.jsx("button",{type:"button",onClick:()=>v.current?.close(),className:"pco-org-avatar__dialog-close","aria-label":"Close modal",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:x.smallX})})})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-body",children:[b&&e.jsxs("div",{role:"alert",className:"pco-org-avatar__dialog-alert",children:[e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",className:"symbol","aria-hidden":"true",children:e.jsx("path",{d:x.exclamationTriangle})}),e.jsx("p",{children:b})]}),e.jsx(P,{accept:{"image/*":[".jpg",".jpeg",".png"]},multiple:!1,onDropAccepted:F,children:({getRootProps:h,getInputProps:n,isFocused:m,isDragAccept:C,isDragReject:w,isDragActive:k})=>{const D=T("pco-org-avatar__dialog-dropzone",`pco-org-avatar__dialog-dropzone--${y}`,{"pco-org-avatar__dialog-dropzone--image":s||a,"pco-org-avatar__dialog-dropzone--focused":m,"pco-org-avatar__dialog-dropzone--accepted":C,"pco-org-avatar__dialog-dropzone--rejected":k&&w});return e.jsxs("div",{...h({className:D}),children:[e.jsx("input",{...n()}),s?e.jsx("img",{src:s.preview,alt:`Church logo for ${o}`}):a?e.jsx("img",{src:a,alt:`Church logo for ${o}`}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"64",height:"64",viewBox:"0 0 16 16","aria-hidden":"true",children:e.jsx("path",{d:x.toCloudArrow})}),k&&w?e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Wrong file type"}),e.jsx("p",{children:"Please upload a PNG or JPG file."})]}):e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Add church logo"}),e.jsx("p",{children:"Use a high-quality image (up to 20mb) with a transparent background."})]})]})]})}})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-actions",children:[a&&e.jsx(A.Button,{label:"Delete logo",kind:"delete",onClick:U,loading:d,disabled:d||c,className:"pco-org-avatar__dialog-delete"}),e.jsx(A.Button,{type:"button",label:"Cancel",onClick:()=>v.current?.close(),disabled:c||d}),e.jsx(A.Button,{type:"submit",label:"Update logo",kind:"primary",loading:c,disabled:!s||c||d})]})]})}),document.body)]})}function E({avatarUrl:a,darkModeAvatarUrl:o,orgName:t,onAvatarUpdate:r,pcoEnv:l,readOnly:j,showDarkModeAvatar:s=!1}){const[g,c]=i.useState(a),[_,d]=i.useState(o),f=(u,p)=>{u==="avatar"?(c(p),r?.("avatar",p)):u==="dark_mode_avatar"&&(d(p),r?.("dark_mode_avatar",p))},b=_||g;return e.jsxs("div",{className:"pco-org-avatars",children:[e.jsx(S,{avatarUrl:g,organization:t,mode:"avatar",pcoEnv:l,readOnly:j,onAvatarUpdate:f}),s&&e.jsx(S,{avatarUrl:b,organization:t,mode:"dark_mode_avatar",pcoEnv:l,readOnly:j,onAvatarUpdate:f})]})}exports.OrganizationAvatars=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),P=require("react-dom"),$=require("@planningcenter/url"),y=require("@planningcenter/tapestry"),I=require("@planningcenter/sweetest-alert"),x=require("@planningcenter/icons/paths/general"),L=require("@planningcenter/icons/paths/services"),E=require("react-dropzone");function B(a){var r,t,o="";if(typeof a=="string"||typeof a=="number")o+=a;else if(typeof a=="object")if(Array.isArray(a)){var d=a.length;for(r=0;r<d;r++)a[r]&&(t=B(a[r]))&&(o&&(o+=" "),o+=t)}else for(t in a)a[t]&&(o&&(o+=" "),o+=t);return o}function W(){for(var a,r,t=0,o="",d=arguments.length;t<d;t++)(a=arguments[t])&&(r=B(a))&&(o&&(o+=" "),o+=r);return o}function G(){const a=document.querySelector('meta[name="csrf-token"]');if(!a||!a.content)throw new Error('CSRF token not found. Ensure your Rails application includes <meta name="csrf-token" content="..."> in the document head.');return a.content}function J(a){const r=a.split("");return[r.shift()?.toUpperCase(),r.join("")].join("")}const X=a=>a==="dark_mode_avatar"?"dark":"light",U=({open:a})=>e.jsxs("h2",{className:"pco-org-avatar__instructions",children:["Drag & drop your logo file to upload, or"," ",e.jsx(y.Button,{label:"browse",kind:"inline-text",onClick:r=>{r.stopPropagation(),a()}})]});function z({avatarUrl:a,organization:r,mode:t,pcoEnv:o,readOnly:d,onAvatarUpdate:f,fallbackAvatarUrl:b}){const[n,_]=c.useState(null),[l,w]=c.useState(!1),[i,p]=c.useState(!1),[g,k]=c.useState(""),q=c.useId(),m=c.useRef(null),u=X(t),v=a||b,T=h=>{const[s]=h;s&&_(Object.assign(s,{preview:URL.createObjectURL(s)}))};c.useEffect(()=>()=>{n?.preview&&(URL.revokeObjectURL(n.preview),k(""))},[n]);const R=async h=>{const s=await fetch($.pcoApiUrl("accounts",{env:o}),{method:"PATCH",headers:{"Content-Type":"application/json","X-CSRF-Token":G(),Accept:"application/json"},body:JSON.stringify({data:{attributes:h}})}),j=await s.json();if(!s.ok)throw j;return j},D=async h=>{if(h.preventDefault(),!(!n||l||i)){w(!0);try{const s=new FileReader,j=await new Promise((C,N)=>{s.onloadend=()=>C(s.result),s.onerror=N,s.readAsDataURL(n)}),A=await R({[t]:j,[`${t}_cache`]:""});_(null),f(t,A.data.attributes[t].url),m.current?.close()}catch{k("We were unable to save your avatar.")}finally{w(!1)}}},S=async()=>{l||i||(p(!0),I.SweetestAlert({type:"danger",title:"Remove this logo?",content:u==="light"?"Removing this logo means no logo will appear in light mode. This cannot be undone.":b?"Removing this logo means your light mode logo will appear in dark mode. This cannot be undone.":"Removing this logo means no logo will appear in dark mode. This cannot be undone.",confirmButton:"Remove logo",onConfirm:async()=>{try{await R({[`remove_${t}`]:"1"}),f(t,""),m.current?.close()}catch{k("We were unable to delete your avatar.")}finally{p(!1)}},onCancel:()=>{p(!1)}}))},M=()=>{_(null),k("")};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pco-org-avatar",children:[e.jsx("button",{type:"button",onClick:()=>m.current?.showModal(),disabled:d,className:`pco-org-avatar__button pco-org-avatar__button--${u}`,children:v?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:v,alt:`Church logo for ${r}`}),e.jsx("div",{className:"tds-btn tds-btn--interaction tds-btn--icononly",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:x.pencil})})})]}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"48",height:"48",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:L.image})}),e.jsx("div",{className:"tds-btn tds-btn--interaction tds-btn--icononly",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:x.pencil})})})]})}),e.jsxs("div",{className:"pco-org-avatar__label",children:[J(u)," mode"]})]}),P.createPortal(e.jsx("dialog",{id:q,ref:m,className:"pco-org-avatar__dialog",onClose:M,children:e.jsxs("form",{onSubmit:D,children:[e.jsxs("div",{className:"pco-org-avatar__dialog-header",children:[e.jsxs("h1",{className:"pco-org-avatar__dialog-title",children:["Church logo — ",u," mode"]}),e.jsx("button",{type:"button",onClick:()=>m.current?.close(),className:"pco-org-avatar__dialog-close","aria-label":"Close modal",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:x.smallX})})})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-body",children:[g&&e.jsxs("div",{role:"alert",className:"pco-org-avatar-alert pco-org-avatar__dialog-alert",children:[e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",className:"symbol","aria-hidden":"true",children:e.jsx("path",{d:x.exclamationTriangle})}),e.jsx("p",{children:g})]}),e.jsx(E,{accept:{"image/*":[".jpg",".jpeg",".png"]},multiple:!1,onDropAccepted:T,children:({getRootProps:h,getInputProps:s,isFocused:j,isDragAccept:A,isDragReject:C,isDragActive:N,open:F})=>{const O=W("pco-org-avatar__dialog-dropzone",`pco-org-avatar__dialog-dropzone--${u}`,{"pco-org-avatar__dialog-dropzone--image":n||v,"pco-org-avatar__dialog-dropzone--focused":j,"pco-org-avatar__dialog-dropzone--accepted":A,"pco-org-avatar__dialog-dropzone--rejected":N&&C});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...h({className:O}),children:[e.jsx("input",{...s()}),n?e.jsx("img",{src:n.preview,alt:`Church logo for ${r}`}):v?e.jsx("img",{src:v,alt:`Church logo for ${r}`}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"64",height:"64",viewBox:"0 0 16 16","aria-hidden":"true",children:e.jsx("path",{d:x.toCloudArrow})}),N&&C?e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Wrong file type"}),e.jsx("p",{children:"Please upload a PNG or JPG file."})]}):e.jsxs(e.Fragment,{children:[e.jsx(U,{open:F}),e.jsx("p",{className:"pco-org-avatar__instructions-sub",children:"Use a high-quality image (up to 20mb) with a transparent background."})]})]})]}),(n||v)&&e.jsx(U,{open:F})]})}})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-actions",children:[a&&u==="light"&&e.jsx(y.Button,{label:"Remove logo",kind:"secondary-delete",onClick:S,loading:i,disabled:i||l,className:"pco-org-avatar__dialog-delete"}),a&&u==="dark"&&e.jsx(y.Button,{label:"Use light mode logo",kind:"secondary",onClick:S,loading:i,disabled:i||l,className:"pco-org-avatar__dialog-delete"}),e.jsx(y.Button,{type:"button",label:"Cancel",onClick:()=>m.current?.close(),disabled:l||i}),e.jsx(y.Button,{type:"submit",label:"Update logo",kind:"primary",loading:l,disabled:!n||l||i})]})]})}),document.body)]})}function H({avatarUrl:a,darkModeAvatarUrl:r,orgName:t,onAvatarUpdate:o,pcoEnv:d,readOnly:f,showDarkModeAvatar:b=!1}){const[n,_]=c.useState(a),[l,w]=c.useState(r),i=(p,g)=>{p==="avatar"?(_(g),o?.("avatar",g)):p==="dark_mode_avatar"&&(w(g),o?.("dark_mode_avatar",g))};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pco-org-avatars",children:[e.jsx(z,{avatarUrl:n,organization:t,mode:"avatar",pcoEnv:d,readOnly:f,onAvatarUpdate:i}),b&&e.jsx(z,{avatarUrl:l,organization:t,mode:"dark_mode_avatar",pcoEnv:d,readOnly:f,onAvatarUpdate:i,fallbackAvatarUrl:n})]}),b&&n&&!l&&e.jsxs("div",{className:"pco-org-avatar-alert",children:[e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",className:"symbol","aria-hidden":"true",children:e.jsx("path",{d:x.infoCircle})}),e.jsx("p",{children:"The same logo is being used for both light and dark modes."})]})]})}exports.OrganizationAvatars=H;

package/dist/index.js

@@ -1,25 +1,26 @@
-import { jsxs as n, Fragment as f, jsx as e } from "react/jsx-runtime";
-import { useState as _, useId as O, useRef as P, useEffect as T } from "react";
-import { createPortal as L } from "react-dom";
-import { pcoApiUrl as I } from "@planningcenter/url";
-import { Button as z } from "@planningcenter/tapestry";
-import { pencil as x, smallX as E, exclamationTriangle as W, toCloudArrow as q } from "@planningcenter/icons/paths/general";
-import { image as G } from "@planningcenter/icons/paths/services";
-import J from "react-dropzone";
-function M(a) {
-  var o, r, t = "";
-  if (typeof a == "string" || typeof a == "number") t += a;
+import { jsxs as r, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { useState as _, useId as L, useRef as E, useEffect as W } from "react";
+import { createPortal as q } from "react-dom";
+import { pcoApiUrl as G } from "@planningcenter/url";
+import { Button as C } from "@planningcenter/tapestry";
+import { SweetestAlert as J } from "@planningcenter/sweetest-alert";
+import { pencil as T, smallX as X, exclamationTriangle as H, toCloudArrow as K, infoCircle as Q } from "@planningcenter/icons/paths/general";
+import { image as V } from "@planningcenter/icons/paths/services";
+import Y from "react-dropzone";
+function D(a) {
+  var t, o, n = "";
+  if (typeof a == "string" || typeof a == "number") n += a;
   else if (typeof a == "object") if (Array.isArray(a)) {
-    var c = a.length;
-    for (o = 0; o < c; o++) a[o] && (r = M(a[o])) && (t && (t += " "), t += r);
-  } else for (r in a) a[r] && (t && (t += " "), t += r);
-  return t;
+    var s = a.length;
+    for (t = 0; t < s; t++) a[t] && (o = D(a[t])) && (n && (n += " "), n += o);
+  } else for (o in a) a[o] && (n && (n += " "), n += o);
+  return n;
 }
-function X() {
-  for (var a, o, r = 0, t = "", c = arguments.length; r < c; r++) (a = arguments[r]) && (o = M(a)) && (t && (t += " "), t += o);
-  return t;
+function Z() {
+  for (var a, t, o = 0, n = "", s = arguments.length; o < s; o++) (a = arguments[o]) && (t = D(a)) && (n && (n += " "), n += t);
+  return n;
 }
-function H() {
+function ee() {
   const a = document.querySelector('meta[name="csrf-token"]');
   if (!a || !a.content)
     throw new Error(
@@ -27,36 +28,50 @@ function H() {
     );
   return a.content;
 }
-function K(a) {
-  const o = a.split("");
-  return [o.shift()?.toUpperCase(), o.join("")].join("");
+function ae(a) {
+  const t = a.split("");
+  return [t.shift()?.toUpperCase(), t.join("")].join("");
 }
-const Q = (a) => a === "dark_mode_avatar" ? "dark" : "light";
-function D({
+const oe = (a) => a === "dark_mode_avatar" ? "dark" : "light", B = ({ open: a }) => /* @__PURE__ */ r("h2", { className: "pco-org-avatar__instructions", children: [
+  "Drag & drop your logo file to upload, or",
+  " ",
+  /* @__PURE__ */ e(
+    C,
+    {
+      label: "browse",
+      kind: "inline-text",
+      onClick: (t) => {
+        t.stopPropagation(), a();
+      }
+    }
+  )
+] });
+function F({
   avatarUrl: a,
-  organization: o,
-  mode: r,
-  pcoEnv: t,
-  readOnly: c,
-  onAvatarUpdate: b
+  organization: t,
+  mode: o,
+  pcoEnv: n,
+  readOnly: s,
+  onAvatarUpdate: y,
+  fallbackAvatarUrl: w
 }) {
-  const [l, p] = _(null), [d, w] = _(!1), [s, y] = _(!1), [N, h] = _(""), g = O(), m = P(null), k = Q(r), R = (u) => {
-    const [i] = u;
-    i && p(
-      Object.assign(i, {
-        preview: URL.createObjectURL(i)
+  const [i, k] = _(null), [d, N] = _(!1), [c, m] = _(!1), [g, A] = _(""), M = L(), v = E(null), p = oe(o), f = a || w, P = (u) => {
+    const [l] = u;
+    l && k(
+      Object.assign(l, {
+        preview: URL.createObjectURL(l)
       })
     );
   };
-  T(() => () => {
-    l?.preview && (URL.revokeObjectURL(l.preview), h(""));
-  }, [l]);
-  const U = async (u) => {
-    const i = await fetch(I("accounts", { env: t }), {
+  W(() => () => {
+    i?.preview && (URL.revokeObjectURL(i.preview), A(""));
+  }, [i]);
+  const x = async (u) => {
+    const l = await fetch(G("accounts", { env: n }), {
       method: "PATCH",
       headers: {
         "Content-Type": "application/json",
-        "X-CSRF-Token": H(),
+        "X-CSRF-Token": ee(),
         Accept: "application/json"
       },
       body: JSON.stringify({
@@ -64,53 +79,61 @@ function D({
           attributes: u
         }
       })
-    }), v = await i.json();
-    if (!i.ok) throw v;
-    return v;
-  }, S = async (u) => {
-    if (u.preventDefault(), !(!l || d || s)) {
-      w(!0);
+    }), b = await l.json();
+    if (!l.ok) throw b;
+    return b;
+  }, $ = async (u) => {
+    if (u.preventDefault(), !(!i || d || c)) {
+      N(!0);
       try {
-        const i = new FileReader(), v = await new Promise((C, A) => {
-          i.onloadend = () => C(i.result), i.onerror = A, i.readAsDataURL(l);
-        }), j = await U({
-          [r]: v,
-          [`${r}_cache`]: ""
+        const l = new FileReader(), b = await new Promise((R, U) => {
+          l.onloadend = () => R(l.result), l.onerror = U, l.readAsDataURL(i);
+        }), j = await x({
+          [o]: b,
+          [`${o}_cache`]: ""
         });
-        p(null), b(r, j.data.attributes[r].url), m.current?.close();
+        k(null), y(o, j.data.attributes[o].url), v.current?.close();
       } catch {
-        h("We were unable to save your avatar.");
+        A("We were unable to save your avatar.");
       } finally {
-        w(!1);
+        N(!1);
       }
     }
-  }, F = async () => {
-    if (!(d || s)) {
-      y(!0);
-      try {
-        await U({
-          [`remove_${r}`]: "1"
-        }), b(r, ""), m.current?.close();
-      } catch {
-        h("We were unable to delete your avatar.");
-      } finally {
-        y(!1);
+  }, z = async () => {
+    d || c || (m(!0), J({
+      type: "danger",
+      title: "Remove this logo?",
+      content: p === "light" ? "Removing this logo means no logo will appear in light mode. This cannot be undone." : w ? "Removing this logo means your light mode logo will appear in dark mode. This cannot be undone." : "Removing this logo means no logo will appear in dark mode. This cannot be undone.",
+      confirmButton: "Remove logo",
+      onConfirm: async () => {
+        try {
+          await x({
+            [`remove_${o}`]: "1"
+          }), y(o, ""), v.current?.close();
+        } catch {
+          A("We were unable to delete your avatar.");
+        } finally {
+          m(!1);
+        }
+      },
+      onCancel: () => {
+        m(!1);
       }
-    }
-  }, B = () => {
-    p(null), h("");
+    }));
+  }, O = () => {
+    k(null), A("");
   };
-  return /* @__PURE__ */ n(f, { children: [
-    /* @__PURE__ */ n("div", { className: "pco-org-avatar", children: [
+  return /* @__PURE__ */ r(h, { children: [
+    /* @__PURE__ */ r("div", { className: "pco-org-avatar", children: [
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: () => m.current?.showModal(),
-          disabled: c,
-          className: `pco-org-avatar__button pco-org-avatar__button--${k}`,
-          children: a ? /* @__PURE__ */ n(f, { children: [
-            /* @__PURE__ */ e("img", { src: a, alt: `Church logo for ${o}` }),
+          onClick: () => v.current?.showModal(),
+          disabled: s,
+          className: `pco-org-avatar__button pco-org-avatar__button--${p}`,
+          children: f ? /* @__PURE__ */ r(h, { children: [
+            /* @__PURE__ */ e("img", { src: f, alt: `Church logo for ${t}` }),
             /* @__PURE__ */ e("div", { className: "tds-btn tds-btn--interaction tds-btn--icononly", children: /* @__PURE__ */ e(
               "svg",
               {
@@ -119,10 +142,10 @@ function D({
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e("path", { d: x })
+                children: /* @__PURE__ */ e("path", { d: T })
               }
             ) })
-          ] }) : /* @__PURE__ */ n(f, { children: [
+          ] }) : /* @__PURE__ */ r(h, { children: [
             /* @__PURE__ */ e(
               "svg",
               {
@@ -131,7 +154,7 @@ function D({
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e("path", { d: G })
+                children: /* @__PURE__ */ e("path", { d: V })
               }
             ),
             /* @__PURE__ */ e("div", { className: "tds-btn tds-btn--interaction tds-btn--icononly", children: /* @__PURE__ */ e(
@@ -142,37 +165,37 @@ function D({
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e("path", { d: x })
+                children: /* @__PURE__ */ e("path", { d: T })
               }
             ) })
           ] })
         }
       ),
-      /* @__PURE__ */ n("div", { className: "pco-org-avatar__label", children: [
-        K(k),
+      /* @__PURE__ */ r("div", { className: "pco-org-avatar__label", children: [
+        ae(p),
         " mode"
       ] })
     ] }),
-    L(
+    q(
       /* @__PURE__ */ e(
         "dialog",
         {
-          id: g,
-          ref: m,
+          id: M,
+          ref: v,
           className: "pco-org-avatar__dialog",
-          onClose: B,
-          children: /* @__PURE__ */ n("form", { onSubmit: S, children: [
-            /* @__PURE__ */ n("div", { className: "pco-org-avatar__dialog-header", children: [
-              /* @__PURE__ */ n("h1", { className: "pco-org-avatar__dialog-title", children: [
+          onClose: O,
+          children: /* @__PURE__ */ r("form", { onSubmit: $, children: [
+            /* @__PURE__ */ r("div", { className: "pco-org-avatar__dialog-header", children: [
+              /* @__PURE__ */ r("h1", { className: "pco-org-avatar__dialog-title", children: [
                 "Church logo — ",
-                k,
+                p,
                 " mode"
               ] }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: () => m.current?.close(),
+                  onClick: () => v.current?.close(),
                   className: "pco-org-avatar__dialog-close",
                   "aria-label": "Close modal",
                   children: /* @__PURE__ */ e(
@@ -183,14 +206,14 @@ function D({
                       viewBox: "0 0 16 16",
                       fill: "currentColor",
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ e("path", { d: E })
+                      children: /* @__PURE__ */ e("path", { d: X })
                     }
                   )
                 }
               )
             ] }),
-            /* @__PURE__ */ n("div", { className: "pco-org-avatar__dialog-body", children: [
-              N && /* @__PURE__ */ n("div", { role: "alert", className: "pco-org-avatar__dialog-alert", children: [
+            /* @__PURE__ */ r("div", { className: "pco-org-avatar__dialog-body", children: [
+              g && /* @__PURE__ */ r("div", { role: "alert", className: "pco-org-avatar-alert pco-org-avatar__dialog-alert", children: [
                 /* @__PURE__ */ e(
                   "svg",
                   {
@@ -199,102 +222,117 @@ function D({
                     viewBox: "0 0 16 16",
                     className: "symbol",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ e("path", { d: W })
+                    children: /* @__PURE__ */ e("path", { d: H })
                   }
                 ),
-                /* @__PURE__ */ e("p", { children: N })
+                /* @__PURE__ */ e("p", { children: g })
               ] }),
               /* @__PURE__ */ e(
-                J,
+                Y,
                 {
                   accept: { "image/*": [".jpg", ".jpeg", ".png"] },
                   multiple: !1,
-                  onDropAccepted: R,
+                  onDropAccepted: P,
                   children: ({
                     getRootProps: u,
-                    getInputProps: i,
-                    isFocused: v,
+                    getInputProps: l,
+                    isFocused: b,
                     isDragAccept: j,
-                    isDragReject: C,
-                    isDragActive: A
+                    isDragReject: R,
+                    isDragActive: U,
+                    open: S
                   }) => {
-                    const $ = X(
+                    const I = Z(
                       "pco-org-avatar__dialog-dropzone",
-                      `pco-org-avatar__dialog-dropzone--${k}`,
+                      `pco-org-avatar__dialog-dropzone--${p}`,
                       {
-                        "pco-org-avatar__dialog-dropzone--image": l || a,
-                        "pco-org-avatar__dialog-dropzone--focused": v,
+                        "pco-org-avatar__dialog-dropzone--image": i || f,
+                        "pco-org-avatar__dialog-dropzone--focused": b,
                         "pco-org-avatar__dialog-dropzone--accepted": j,
-                        "pco-org-avatar__dialog-dropzone--rejected": A && C
+                        "pco-org-avatar__dialog-dropzone--rejected": U && R
                       }
                     );
-                    return /* @__PURE__ */ n("div", { ...u({ className: $ }), children: [
-                      /* @__PURE__ */ e("input", { ...i() }),
-                      l ? /* @__PURE__ */ e(
-                        "img",
-                        {
-                          src: l.preview,
-                          alt: `Church logo for ${o}`
-                        }
-                      ) : a ? /* @__PURE__ */ e(
-                        "img",
-                        {
-                          src: a,
-                          alt: `Church logo for ${o}`
-                        }
-                      ) : /* @__PURE__ */ n(f, { children: [
-                        /* @__PURE__ */ e(
-                          "svg",
+                    return /* @__PURE__ */ r(h, { children: [
+                      /* @__PURE__ */ r("div", { ...u({ className: I }), children: [
+                        /* @__PURE__ */ e("input", { ...l() }),
+                        i ? /* @__PURE__ */ e(
+                          "img",
+                          {
+                            src: i.preview,
+                            alt: `Church logo for ${t}`
+                          }
+                        ) : f ? /* @__PURE__ */ e(
+                          "img",
                           {
-                            width: "64",
-                            height: "64",
-                            viewBox: "0 0 16 16",
-                            "aria-hidden": "true",
-                            children: /* @__PURE__ */ e("path", { d: q })
+                            src: f,
+                            alt: `Church logo for ${t}`
                           }
-                        ),
-                        A && C ? /* @__PURE__ */ n(f, { children: [
-                          /* @__PURE__ */ e("h2", { children: "Wrong file type" }),
-                          /* @__PURE__ */ e("p", { children: "Please upload a PNG or JPG file." })
-                        ] }) : /* @__PURE__ */ n(f, { children: [
-                          /* @__PURE__ */ e("h2", { children: "Add church logo" }),
-                          /* @__PURE__ */ e("p", { children: "Use a high-quality image (up to 20mb) with a transparent background." })
+                        ) : /* @__PURE__ */ r(h, { children: [
+                          /* @__PURE__ */ e(
+                            "svg",
+                            {
+                              width: "64",
+                              height: "64",
+                              viewBox: "0 0 16 16",
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ e("path", { d: K })
+                            }
+                          ),
+                          U && R ? /* @__PURE__ */ r(h, { children: [
+                            /* @__PURE__ */ e("h2", { children: "Wrong file type" }),
+                            /* @__PURE__ */ e("p", { children: "Please upload a PNG or JPG file." })
+                          ] }) : /* @__PURE__ */ r(h, { children: [
+                            /* @__PURE__ */ e(B, { open: S }),
+                            /* @__PURE__ */ e("p", { className: "pco-org-avatar__instructions-sub", children: "Use a high-quality image (up to 20mb) with a transparent background." })
+                          ] })
                         ] })
-                      ] })
+                      ] }),
+                      (i || f) && /* @__PURE__ */ e(B, { open: S })
                     ] });
                   }
                 }
               )
             ] }),
-            /* @__PURE__ */ n("div", { className: "pco-org-avatar__dialog-actions", children: [
-              a && /* @__PURE__ */ e(
-                z,
+            /* @__PURE__ */ r("div", { className: "pco-org-avatar__dialog-actions", children: [
+              a && p === "light" && /* @__PURE__ */ e(
+                C,
+                {
+                  label: "Remove logo",
+                  kind: "secondary-delete",
+                  onClick: z,
+                  loading: c,
+                  disabled: c || d,
+                  className: "pco-org-avatar__dialog-delete"
+                }
+              ),
+              a && p === "dark" && /* @__PURE__ */ e(
+                C,
                 {
-                  label: "Delete logo",
-                  kind: "delete",
-                  onClick: F,
-                  loading: s,
-                  disabled: s || d,
+                  label: "Use light mode logo",
+                  kind: "secondary",
+                  onClick: z,
+                  loading: c,
+                  disabled: c || d,
                   className: "pco-org-avatar__dialog-delete"
                 }
               ),
               /* @__PURE__ */ e(
-                z,
+                C,
                 {
                   type: "button",
                   label: "Cancel",
-                  onClick: () => m.current?.close(),
-                  disabled: d || s
+                  onClick: () => v.current?.close(),
+                  disabled: d || c
                 }
               ),
               /* @__PURE__ */ e(
-                z,
+                C,
                 {
                   type: "submit",
                   label: "Update logo",
                   kind: "primary",
                   loading: d,
-                  disabled: !l || d || s
+                  disabled: !i || d || c
                 }
               )
             ] })
@@ -305,45 +343,62 @@ function D({
     )
   ] });
 }
-function ne({
+function ge({
   avatarUrl: a,
-  darkModeAvatarUrl: o,
-  orgName: r,
-  onAvatarUpdate: t,
-  pcoEnv: c,
-  readOnly: b,
-  showDarkModeAvatar: l = !1
+  darkModeAvatarUrl: t,
+  orgName: o,
+  onAvatarUpdate: n,
+  pcoEnv: s,
+  readOnly: y,
+  showDarkModeAvatar: w = !1
 }) {
-  const [p, d] = _(a), [w, s] = _(
-    o
-  ), y = (h, g) => {
-    h === "avatar" ? (d(g), t?.("avatar", g)) : h === "dark_mode_avatar" && (s(g), t?.("dark_mode_avatar", g));
+  const [i, k] = _(a), [d, N] = _(
+    t
+  ), c = (m, g) => {
+    m === "avatar" ? (k(g), n?.("avatar", g)) : m === "dark_mode_avatar" && (N(g), n?.("dark_mode_avatar", g));
   };
-  return /* @__PURE__ */ n("div", { className: "pco-org-avatars", children: [
-    /* @__PURE__ */ e(
-      D,
-      {
-        avatarUrl: p,
-        organization: r,
-        mode: "avatar",
-        pcoEnv: c,
-        readOnly: b,
-        onAvatarUpdate: y
-      }
-    ),
-    l && /* @__PURE__ */ e(
-      D,
-      {
-        avatarUrl: w || p,
-        organization: r,
-        mode: "dark_mode_avatar",
-        pcoEnv: c,
-        readOnly: b,
-        onAvatarUpdate: y
-      }
-    )
+  return /* @__PURE__ */ r(h, { children: [
+    /* @__PURE__ */ r("div", { className: "pco-org-avatars", children: [
+      /* @__PURE__ */ e(
+        F,
+        {
+          avatarUrl: i,
+          organization: o,
+          mode: "avatar",
+          pcoEnv: s,
+          readOnly: y,
+          onAvatarUpdate: c
+        }
+      ),
+      w && /* @__PURE__ */ e(
+        F,
+        {
+          avatarUrl: d,
+          organization: o,
+          mode: "dark_mode_avatar",
+          pcoEnv: s,
+          readOnly: y,
+          onAvatarUpdate: c,
+          fallbackAvatarUrl: i
+        }
+      )
+    ] }),
+    w && i && !d && /* @__PURE__ */ r("div", { className: "pco-org-avatar-alert", children: [
+      /* @__PURE__ */ e(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          className: "symbol",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ e("path", { d: Q })
+        }
+      ),
+      /* @__PURE__ */ e("p", { children: "The same logo is being used for both light and dark modes." })
+    ] })
   ] });
 }
 export {
-  ne as OrganizationAvatars
+  ge as OrganizationAvatars
 };

package/dist/organization_avatar.d.ts

@@ -1,2 +1,2 @@
 import type { OrganizationAvatarProps } from "./types";
-export declare function OrganizationAvatar({ avatarUrl, organization, mode, pcoEnv, readOnly, onAvatarUpdate, }: OrganizationAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function OrganizationAvatar({ avatarUrl, organization, mode, pcoEnv, readOnly, onAvatarUpdate, fallbackAvatarUrl, }: OrganizationAvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/style.css

@@ -3,23 +3,51 @@
   gap: var(--t-spacing-1);
 }
 
+.pco-org-avatar-alert {
+  background: var(--t-fill-color-status-info-ghost);
+  border-radius: var(--t-border-radius-lg);
+  display: flex;
+  gap: var(--t-spacing-2);
+  margin-top: var(--t-spacing-2);
+  padding: var(--t-spacing-2);
+}
+
+.pco-org-avatar-alert svg {
+  fill: var(--t-icon-color-status-info);
+  flex-shrink: 0;
+  height: var(--t-element-size-md);
+  position: relative;
+  top: 1px;
+  width: var(--t-element-size-md);
+}
+
+.pco-org-avatar-alert p {
+  display: flex;
+  flex-direction: column;
+  gap: var(--t-spacing-half);
+  margin: 0;
+}
+
 .pco-org-avatar {
   align-items: center;
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   gap: var(--t-spacing-1);
+  flex: 1;
+  max-width: 175px;
+  min-width: 0;
 }
 
 .pco-org-avatar__button {
+  aspect-ratio: 175 / 100;
   background: var(--t-surface-color-canvas);
   border: var(--t-border-width) dashed var(--t-border-color);
   border-radius: var(--t-border-radius-lg);
   color: var(--t-icon-color-dim);
   cursor: pointer;
-  height: 100px;
   padding: var(--t-spacing-1);
   position: relative;
-  width: 175px;
+  width: 100%;
 }
 
 .pco-org-avatar__button img {
@@ -136,27 +164,11 @@
 
 .pco-org-avatar__dialog-alert {
   background: var(--t-fill-color-status-error-ghost);
-  border-radius: var(--t-border-radius-lg);
-  display: flex;
-  gap: var(--t-spacing-2);
-  margin-bottom: var(--t-spacing-2);
-  padding: var(--t-spacing-2);
+  margin-block: 0 var(--t-spacing-2);
 }
 
 .pco-org-avatar__dialog-alert svg {
   fill: var(--t-icon-color-status-error);
-  flex-shrink: 0;
-  height: var(--t-element-size-md);
-  position: relative;
-  top: 1px;
-  width: var(--t-element-size-md);
-}
-
-.pco-org-avatar__dialog-alert p {
-  display: flex;
-  flex-direction: column;
-  gap: var(--t-spacing-half);
-  margin: 0;
 }
 
 .pco-org-avatar__dialog-dropzone {
@@ -178,19 +190,6 @@
   fill: var(--t-icon-color-status-info);
 }
 
-.pco-org-avatar__dialog-dropzone h2 {
-  color: var(--t-text-color-headline);
-  font-size: var(--t-font-size-md);
-  font-weight: var(--t-font-weight-normal);
-  margin: 0;
-}
-
-.pco-org-avatar__dialog-dropzone p {
-  color: var(--t-text-color-placeholder);
-  font-size: var(--t-font-size-sm);
-  margin: 0;
-}
-
 .pco-org-avatar__dialog-dropzone img {
   max-height: 100%;
   max-width: 100%;
@@ -222,11 +221,25 @@
   fill: var(--t-fill-color-status-error);
 }
 
-/* Light/dark backgrounds are hardcoded to match the avatar preview context,
+.pco-org-avatar__instructions {
+  font-size: var(--t-font-size-md);
+  font-weight: var(--t-font-weight-normal);
+  margin: var(--t-spacing-2) 0 0;
+  text-align: center;
+}
+
+.pco-org-avatar__instructions-sub {
+  color: var(--t-text-color-secondary);
+  font-size: var(--t-font-size-sm);
+  margin: 0;
+}
+
+/* Light/dark colors/backgrounds are hardcoded to match the avatar preview context,
    regardless of the UI theme or whether an avatar is uploaded */
+
 .pco-org-avatar__button--light,
 .pco-org-avatar__dialog-dropzone--light {
-  background: hsl(0, 0%, 100%);
+  background: hsl(0, 0%, 97%);
 }
 
 .pco-org-avatar__button--light:has(img),
@@ -243,3 +256,11 @@
 .pco-org-avatar__dialog-dropzone--dark:has(img) {
   border-color: transparent;
 }
+
+.pco-org-avatar__dialog-dropzone--light .pco-org-avatar__instructions {
+  color: hsl(0, 0%, 12%);
+}
+
+.pco-org-avatar__dialog-dropzone--dark .pco-org-avatar__instructions {
+  color: hsl(0, 0%, 94%);
+}

package/dist/types.d.ts

@@ -16,6 +16,7 @@ export type OrganizationAvatarProps = {
     pcoEnv?: Environment;
     readOnly?: boolean;
     onAvatarUpdate: (attrName: AvatarMode, newUrl: string) => void;
+    fallbackAvatarUrl?: string;
 };
 export type FileWithPreview = File & {
     preview: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/organization-avatars",
-  "version": "1.6.3",
+  "version": "1.8.0",
   "description": "Organization avatar upload components for Planning Center apps",
   "type": "module",
   "packageManager": "yarn@1.22.22",
@@ -31,14 +31,19 @@
   },
   "peerDependencies": {
     "@planningcenter/icons": "^15.29.1",
+    "@planningcenter/sweetest-alert": "^1.0.1",
     "@planningcenter/tapestry": "^2.10.1",
     "@planningcenter/url": "^3.2.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-dropzone": "^14.0.0"
   },
+  "prettier": {
+    "semi": false
+  },
   "devDependencies": {
     "@planningcenter/icons": "^15.29.1",
+    "@planningcenter/sweetest-alert": "^1.0.1",
     "@planningcenter/tapestry": "^2.10.1",
     "@planningcenter/url": "^3.2.0",
     "@types/react": "^18.3.0",