@planningcenter/organization-avatars 1.2.1 → 1.4.0

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"),O=require("@planningcenter/url"),C=require("@planningcenter/tapestry"),w=require("@planningcenter/icons/paths/general"),B=require("@planningcenter/icons/paths/services"),D=require("react-dropzone");function N(a){var o,r,t="";if(typeof a=="string"||typeof a=="number")t+=a;else if(typeof a=="object")if(Array.isArray(a)){var c=a.length;for(o=0;o<c;o++)a[o]&&(r=N(a[o]))&&(t&&(t+=" "),t+=r)}else for(r in a)a[r]&&(t&&(t+=" "),t+=r);return t}function L(){for(var a,o,r=0,t="",c=arguments.length;r<c;r++)(a=arguments[r])&&(o=N(a))&&(t&&(t+=" "),t+=o);return t}function P(){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}const T=a=>a==="dark_mode_avatar"?"dark":"light";function U({avatarUrl:a,organization:o,mode:r,pcoEnv:t,onAvatarUpdate:c}){const[s,m]=i.useState(null),[d,f]=i.useState(a),[l,g]=i.useState(!1),[v,u]=i.useState(""),j=i.useId(),k=i.useRef(null),x=T(r),S=h=>{const[n]=h;n&&m(Object.assign(n,{preview:URL.createObjectURL(n)}))};i.useEffect(()=>{f(a)},[a]),i.useEffect(()=>()=>{s?.preview&&(URL.revokeObjectURL(s.preview),u(""))},[s]);const A=async h=>{const n=await fetch(O.pcoApiUrl("accounts",{env:t}),{method:"PATCH",headers:{"Content-Type":"application/json","X-CSRF-Token":P(),Accept:"application/json"},body:JSON.stringify({data:{attributes:h}})}),p=await n.json();if(!n.ok)throw p;return p},z=async h=>{if(h.preventDefault(),!(!s||l)){g(!0);try{const n=new FileReader,p=await new Promise((b,y)=>{n.onloadend=()=>b(n.result),n.onerror=y,n.readAsDataURL(s)}),_=await A({[r]:p,[`${r}_cache`]:""});f(_.data.attributes[r].url),m(null),c(r,_.data.attributes[r].url),k.current?.close()}catch{u("We were unable to save your avatar.")}finally{g(!1)}}},F=async()=>{if(!l){g(!0);try{await A({[`remove_${r}`]:"1"}),f(""),c(r,""),k.current?.close()}catch{u("We were unable to delete your avatar.")}finally{g(!1)}}},R=()=>{m(null),u("")};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pco-org-avatar",children:[e.jsx("button",{type:"button",commandfor:j,command:"show-modal",className:`pco-org-avatar__button pco-org-avatar__button--${x}`,children:d?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:d,alt:`Church logo for ${o}`}),e.jsx("span",{children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:w.pencil})})})]}):e.jsx("svg",{width:"48",height:"48",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:B.image})})}),e.jsxs("div",{className:"pco-org-avatar__label",children:[x," mode"]})]}),M.createPortal(e.jsx("dialog",{id:j,ref:k,className:"dialog",onClose:R,children:e.jsxs("form",{onSubmit:z,children:[e.jsxs("div",{className:"dialog__header",children:[e.jsxs("h1",{className:"dialog__title",children:["Church logo — ",x," mode"]}),e.jsx("button",{type:"button",commandfor:j,command:"close",className:"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:w.smallX})})})]}),e.jsxs("div",{className:"dialog__body",children:[v&&e.jsxs("div",{role:"alert",className:"alert alert--danger mb-2",children:[e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",className:"symbol","aria-hidden":"true",children:e.jsx("path",{d:w.exclamationTriangle})}),e.jsx("div",{className:"alert__content",children:e.jsx("p",{children:v})})]}),e.jsx(D,{accept:{"image/*":[".jpg",".jpeg",".png"]},multiple:!1,onDropAccepted:S,children:({getRootProps:h,getInputProps:n,isFocused:p,isDragAccept:_,isDragReject:b,isDragActive:y})=>{const q=L("pco-org-avatar__dropzone",`pco-org-avatar__dropzone--${x}`,{"pco-org-avatar__dropzone--image":s||d,"pco-org-avatar__dropzone--focused":p,"pco-org-avatar__dropzone--accepted":_,"pco-org-avatar__dropzone--rejected":y&&b});return e.jsxs("div",{...h({className:q}),children:[e.jsx("input",{...n()}),s?e.jsx("img",{src:s.preview,alt:`Church logo for ${o}`}):d?e.jsx("img",{src:d,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:w.toCloudArrow})}),y&&b?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:"dialog__actions",children:[d&&e.jsx(C.Button,{label:"Delete logo",kind:"delete",onClick:F,loading:l,disabled:l,className:"mr-a"}),e.jsx(C.Button,{type:"button",label:"Cancel",commandfor:j,command:"close",disabled:l}),e.jsx(C.Button,{type:"submit",label:"Update logo",kind:"primary",loading:l,disabled:!s||l})]})]})}),document.body)]})}function $({avatarUrl:a,darkModeAvatarUrl:o,orgName:r,pcoEnv:t,showDarkModeAvatar:c=!1}){const[s,m]=i.useState(a),[d,f]=i.useState(o),l=(v,u)=>{v==="avatar"?m(u):v==="dark_mode_avatar"&&f(u)},g=d||s;return e.jsxs("div",{className:"d-f g-1",children:[e.jsx(U,{avatarUrl:s,organization:r,mode:"avatar",pcoEnv:t,onAvatarUpdate:l}),c&&e.jsx(U,{avatarUrl:g,organization:r,mode:"dark_mode_avatar",pcoEnv:t,onAvatarUpdate:l})]})}exports.OrganizationAvatars=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),O=require("react-dom"),B=require("@planningcenter/url"),k=require("@planningcenter/tapestry"),A=require("@planningcenter/icons/paths/general"),P=require("@planningcenter/icons/paths/services"),T=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 d=a.length;for(o=0;o<d;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 $(){for(var a,o,t=0,r="",d=arguments.length;t<d;t++)(a=arguments[t])&&(o=z(a))&&(r&&(r+=" "),r+=o);return r}function L(){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 E(a){const o=a.split("");return[o.shift()?.toUpperCase(),o.join("")].join("")}const I=a=>a==="dark_mode_avatar"?"dark":"light";function N({avatarUrl:a,organization:o,mode:t,pcoEnv:r,onAvatarUpdate:d}){const[s,p]=i.useState(null),[u,m]=i.useState(a),[l,f]=i.useState(!1),[c,v]=i.useState(!1),[U,j]=i.useState(""),x=i.useId(),C=i.useRef(null),_=I(t),F=g=>{const[n]=g;n&&p(Object.assign(n,{preview:URL.createObjectURL(n)}))};i.useEffect(()=>{m(a)},[a]),i.useEffect(()=>()=>{s?.preview&&(URL.revokeObjectURL(s.preview),j(""))},[s]);const S=async g=>{const n=await fetch(B.pcoApiUrl("accounts",{env:r}),{method:"PATCH",headers:{"Content-Type":"application/json","X-CSRF-Token":L(),Accept:"application/json"},body:JSON.stringify({data:{attributes:g}})}),h=await n.json();if(!n.ok)throw h;return h},R=async g=>{if(g.preventDefault(),!(!s||l||c)){f(!0);try{const n=new FileReader,h=await new Promise((y,w)=>{n.onloadend=()=>y(n.result),n.onerror=w,n.readAsDataURL(s)}),b=await S({[t]:h,[`${t}_cache`]:""});m(b.data.attributes[t].url),p(null),d(t,b.data.attributes[t].url),C.current?.close()}catch{j("We were unable to save your avatar.")}finally{f(!1)}}},q=async()=>{if(!(l||c)){v(!0);try{await S({[`remove_${t}`]:"1"}),m(""),d(t,""),C.current?.close()}catch{j("We were unable to delete your avatar.")}finally{v(!1)}}},D=()=>{p(null),j("")};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pco-org-avatar",children:[e.jsx("button",{type:"button",commandfor:x,command:"show-modal",className:`pco-org-avatar__button pco-org-avatar__button--${_}`,children:u?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:u,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:A.pencil})})})]}):e.jsx("svg",{width:"48",height:"48",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:P.image})})}),e.jsxs("div",{className:"pco-org-avatar__label",children:[E(_)," mode"]})]}),O.createPortal(e.jsx("dialog",{id:x,ref:C,className:"pco-org-avatar__dialog",onClose:D,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 — ",_," mode"]}),e.jsx("button",{type:"button",commandfor:x,command:"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:A.smallX})})})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-body",children:[U&&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:A.exclamationTriangle})}),e.jsx("p",{children:U})]}),e.jsx(T,{accept:{"image/*":[".jpg",".jpeg",".png"]},multiple:!1,onDropAccepted:F,children:({getRootProps:g,getInputProps:n,isFocused:h,isDragAccept:b,isDragReject:y,isDragActive:w})=>{const M=$("pco-org-avatar__dialog-dropzone",`pco-org-avatar__dialog-dropzone--${_}`,{"pco-org-avatar__dialog-dropzone--image":s||u,"pco-org-avatar__dialog-dropzone--focused":h,"pco-org-avatar__dialog-dropzone--accepted":b,"pco-org-avatar__dialog-dropzone--rejected":w&&y});return e.jsxs("div",{...g({className:M}),children:[e.jsx("input",{...n()}),s?e.jsx("img",{src:s.preview,alt:`Church logo for ${o}`}):u?e.jsx("img",{src:u,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:A.toCloudArrow})}),w&&y?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:[u&&e.jsx(k.Button,{label:"Delete logo",kind:"delete",onClick:q,loading:c,disabled:c||l,className:"pco-org-avatar__dialog-delete"}),e.jsx(k.Button,{type:"button",label:"Cancel",commandfor:x,command:"close",disabled:l||c}),e.jsx(k.Button,{type:"submit",label:"Update logo",kind:"primary",loading:l,disabled:!s||l||c})]})]})}),document.body)]})}function W({avatarUrl:a,darkModeAvatarUrl:o,orgName:t,pcoEnv:r,showDarkModeAvatar:d=!1}){const[s,p]=i.useState(a),[u,m]=i.useState(o),l=(c,v)=>{c==="avatar"?p(v):c==="dark_mode_avatar"&&m(v)},f=u||s;return e.jsxs("div",{className:"pco-org-avatars",children:[e.jsx(N,{avatarUrl:s,organization:t,mode:"avatar",pcoEnv:r,onAvatarUpdate:l}),d&&e.jsx(N,{avatarUrl:f,organization:t,mode:"dark_mode_avatar",pcoEnv:r,onAvatarUpdate:l})]})}exports.OrganizationAvatars=W;

package/dist/index.js

@@ -1,125 +1,129 @@
-import { jsxs as o, Fragment as b, jsx as e } from "react/jsx-runtime";
-import { useState as p, useId as S, useRef as $, useEffect as j } from "react";
-import { createPortal as B } from "react-dom";
-import { pcoApiUrl as P } from "@planningcenter/url";
-import { Button as N } from "@planningcenter/tapestry";
-import { pencil as T, smallX as E, exclamationTriangle as I, toCloudArrow as W } from "@planningcenter/icons/paths/general";
-import { image as q } from "@planningcenter/icons/paths/services";
-import G from "react-dropzone";
-function R(a) {
-  var n, r, t = "";
-  if (typeof a == "string" || typeof a == "number") t += a;
-  else if (typeof a == "object") if (Array.isArray(a)) {
-    var d = a.length;
-    for (n = 0; n < d; n++) a[n] && (r = R(a[n])) && (t && (t += " "), t += r);
-  } else for (r in a) a[r] && (t && (t += " "), t += r);
+import { jsxs as n, Fragment as _, jsx as a } from "react/jsx-runtime";
+import { useState as u, useId as P, useRef as T, useEffect as D } from "react";
+import { createPortal as L } from "react-dom";
+import { pcoApiUrl as I } from "@planningcenter/url";
+import { Button as j } from "@planningcenter/tapestry";
+import { pencil as E, smallX as W, exclamationTriangle as q, toCloudArrow as G } from "@planningcenter/icons/paths/general";
+import { image as J } from "@planningcenter/icons/paths/services";
+import X from "react-dropzone";
+function M(e) {
+  var o, r, t = "";
+  if (typeof e == "string" || typeof e == "number") t += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var s = e.length;
+    for (o = 0; o < s; o++) e[o] && (r = M(e[o])) && (t && (t += " "), t += r);
+  } else for (r in e) e[r] && (t && (t += " "), t += r);
   return t;
 }
-function J() {
-  for (var a, n, r = 0, t = "", d = arguments.length; r < d; r++) (a = arguments[r]) && (n = R(a)) && (t && (t += " "), t += n);
+function H() {
+  for (var e, o, r = 0, t = "", s = arguments.length; r < s; r++) (e = arguments[r]) && (o = M(e)) && (t && (t += " "), t += o);
   return t;
 }
-function X() {
-  const a = document.querySelector('meta[name="csrf-token"]');
-  if (!a || !a.content)
+function K() {
+  const e = document.querySelector('meta[name="csrf-token"]');
+  if (!e || !e.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;
+  return e.content;
 }
-const H = (a) => a === "dark_mode_avatar" ? "dark" : "light";
-function x({
-  avatarUrl: a,
-  organization: n,
+function Q(e) {
+  const o = e.split("");
+  return [o.shift()?.toUpperCase(), o.join("")].join("");
+}
+const V = (e) => e === "dark_mode_avatar" ? "dark" : "light";
+function R({
+  avatarUrl: e,
+  organization: o,
   mode: r,
   pcoEnv: t,
-  onAvatarUpdate: d
+  onAvatarUpdate: s
 }) {
-  const [i, g] = p(null), [s, f] = p(a), [c, v] = p(!1), [_, h] = p(""), y = S(), A = $(null), w = H(r), M = (u) => {
-    const [l] = u;
-    l && g(
-      Object.assign(l, {
-        preview: URL.createObjectURL(l)
+  const [l, m] = u(null), [h, f] = u(e), [c, U] = u(!1), [d, v] = u(!1), [z, b] = u(""), y = P(), N = T(null), w = V(r), S = (p) => {
+    const [i] = p;
+    i && m(
+      Object.assign(i, {
+        preview: URL.createObjectURL(i)
       })
     );
   };
-  j(() => {
-    f(a);
-  }, [a]), j(() => () => {
-    i?.preview && (URL.revokeObjectURL(i.preview), h(""));
-  }, [i]);
-  const z = async (u) => {
-    const l = await fetch(P("accounts", { env: t }), {
+  D(() => {
+    f(e);
+  }, [e]), D(() => () => {
+    l?.preview && (URL.revokeObjectURL(l.preview), b(""));
+  }, [l]);
+  const x = async (p) => {
+    const i = await fetch(I("accounts", { env: t }), {
       method: "PATCH",
       headers: {
         "Content-Type": "application/json",
-        "X-CSRF-Token": X(),
+        "X-CSRF-Token": K(),
         Accept: "application/json"
       },
       body: JSON.stringify({
         data: {
-          attributes: u
+          attributes: p
         }
       })
-    }), m = await l.json();
-    if (!l.ok) throw m;
-    return m;
-  }, D = async (u) => {
-    if (u.preventDefault(), !(!i || c)) {
-      v(!0);
+    }), g = await i.json();
+    if (!i.ok) throw g;
+    return g;
+  }, F = async (p) => {
+    if (p.preventDefault(), !(!l || c || d)) {
+      U(!0);
       try {
-        const l = new FileReader(), m = await new Promise((C, U) => {
-          l.onloadend = () => C(l.result), l.onerror = U, l.readAsDataURL(i);
-        }), k = await z({
-          [r]: m,
+        const i = new FileReader(), g = await new Promise((A, C) => {
+          i.onloadend = () => A(i.result), i.onerror = C, i.readAsDataURL(l);
+        }), k = await x({
+          [r]: g,
           [`${r}_cache`]: ""
         });
-        f(k.data.attributes[r].url), g(null), d(r, k.data.attributes[r].url), A.current?.close();
+        f(k.data.attributes[r].url), m(null), s(r, k.data.attributes[r].url), N.current?.close();
       } catch {
-        h("We were unable to save your avatar.");
+        b("We were unable to save your avatar.");
       } finally {
-        v(!1);
+        U(!1);
       }
     }
-  }, F = async () => {
-    if (!c) {
+  }, O = async () => {
+    if (!(c || d)) {
       v(!0);
       try {
-        await z({
+        await x({
           [`remove_${r}`]: "1"
-        }), f(""), d(r, ""), A.current?.close();
+        }), f(""), s(r, ""), N.current?.close();
       } catch {
-        h("We were unable to delete your avatar.");
+        b("We were unable to delete your avatar.");
       } finally {
         v(!1);
       }
     }
-  }, L = () => {
-    g(null), h("");
+  }, $ = () => {
+    m(null), b("");
   };
-  return /* @__PURE__ */ o(b, { children: [
-    /* @__PURE__ */ o("div", { className: "pco-org-avatar", children: [
-      /* @__PURE__ */ e(
+  return /* @__PURE__ */ n(_, { children: [
+    /* @__PURE__ */ n("div", { className: "pco-org-avatar", children: [
+      /* @__PURE__ */ a(
         "button",
         {
           type: "button",
           commandfor: y,
           command: "show-modal",
           className: `pco-org-avatar__button pco-org-avatar__button--${w}`,
-          children: s ? /* @__PURE__ */ o(b, { children: [
-            /* @__PURE__ */ e("img", { src: s, alt: `Church logo for ${n}` }),
-            /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+          children: h ? /* @__PURE__ */ n(_, { children: [
+            /* @__PURE__ */ a("img", { src: h, alt: `Church logo for ${o}` }),
+            /* @__PURE__ */ a("div", { className: "tds-btn tds-btn--interaction tds-btn--icononly", children: /* @__PURE__ */ a(
               "svg",
               {
-                width: "16",
-                height: "16",
+                width: "14",
+                height: "14",
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e("path", { d: T })
+                children: /* @__PURE__ */ a("path", { d: E })
               }
             ) })
-          ] }) : /* @__PURE__ */ e(
+          ] }) : /* @__PURE__ */ a(
             "svg",
             {
               width: "48",
@@ -127,40 +131,40 @@ function x({
               viewBox: "0 0 16 16",
               fill: "currentColor",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ e("path", { d: q })
+              children: /* @__PURE__ */ a("path", { d: J })
             }
           )
         }
       ),
-      /* @__PURE__ */ o("div", { className: "pco-org-avatar__label", children: [
-        w,
+      /* @__PURE__ */ n("div", { className: "pco-org-avatar__label", children: [
+        Q(w),
         " mode"
       ] })
     ] }),
-    B(
-      /* @__PURE__ */ e(
+    L(
+      /* @__PURE__ */ a(
         "dialog",
         {
           id: y,
-          ref: A,
-          className: "dialog",
-          onClose: L,
-          children: /* @__PURE__ */ o("form", { onSubmit: D, children: [
-            /* @__PURE__ */ o("div", { className: "dialog__header", children: [
-              /* @__PURE__ */ o("h1", { className: "dialog__title", children: [
+          ref: N,
+          className: "pco-org-avatar__dialog",
+          onClose: $,
+          children: /* @__PURE__ */ n("form", { onSubmit: F, children: [
+            /* @__PURE__ */ n("div", { className: "pco-org-avatar__dialog-header", children: [
+              /* @__PURE__ */ n("h1", { className: "pco-org-avatar__dialog-title", children: [
                 "Church logo — ",
                 w,
                 " mode"
               ] }),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
                   commandfor: y,
                   command: "close",
-                  className: "dialog__close",
+                  className: "pco-org-avatar__dialog-close",
                   "aria-label": "Close modal",
-                  children: /* @__PURE__ */ e(
+                  children: /* @__PURE__ */ a(
                     "svg",
                     {
                       width: "16",
@@ -168,15 +172,15 @@ function x({
                       viewBox: "0 0 16 16",
                       fill: "currentColor",
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ e("path", { d: E })
+                      children: /* @__PURE__ */ a("path", { d: W })
                     }
                   )
                 }
               )
             ] }),
-            /* @__PURE__ */ o("div", { className: "dialog__body", children: [
-              _ && /* @__PURE__ */ o("div", { role: "alert", className: "alert alert--danger mb-2", children: [
-                /* @__PURE__ */ e(
+            /* @__PURE__ */ n("div", { className: "pco-org-avatar__dialog-body", children: [
+              z && /* @__PURE__ */ n("div", { role: "alert", className: "pco-org-avatar__dialog-alert", children: [
+                /* @__PURE__ */ a(
                   "svg",
                   {
                     width: "16",
@@ -184,66 +188,66 @@ function x({
                     viewBox: "0 0 16 16",
                     className: "symbol",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ e("path", { d: I })
+                    children: /* @__PURE__ */ a("path", { d: q })
                   }
                 ),
-                /* @__PURE__ */ e("div", { className: "alert__content", children: /* @__PURE__ */ e("p", { children: _ }) })
+                /* @__PURE__ */ a("p", { children: z })
               ] }),
-              /* @__PURE__ */ e(
-                G,
+              /* @__PURE__ */ a(
+                X,
                 {
                   accept: { "image/*": [".jpg", ".jpeg", ".png"] },
                   multiple: !1,
-                  onDropAccepted: M,
+                  onDropAccepted: S,
                   children: ({
-                    getRootProps: u,
-                    getInputProps: l,
-                    isFocused: m,
+                    getRootProps: p,
+                    getInputProps: i,
+                    isFocused: g,
                     isDragAccept: k,
-                    isDragReject: C,
-                    isDragActive: U
+                    isDragReject: A,
+                    isDragActive: C
                   }) => {
-                    const O = J(
-                      "pco-org-avatar__dropzone",
-                      `pco-org-avatar__dropzone--${w}`,
+                    const B = H(
+                      "pco-org-avatar__dialog-dropzone",
+                      `pco-org-avatar__dialog-dropzone--${w}`,
                       {
-                        "pco-org-avatar__dropzone--image": i || s,
-                        "pco-org-avatar__dropzone--focused": m,
-                        "pco-org-avatar__dropzone--accepted": k,
-                        "pco-org-avatar__dropzone--rejected": U && C
+                        "pco-org-avatar__dialog-dropzone--image": l || h,
+                        "pco-org-avatar__dialog-dropzone--focused": g,
+                        "pco-org-avatar__dialog-dropzone--accepted": k,
+                        "pco-org-avatar__dialog-dropzone--rejected": C && A
                       }
                     );
-                    return /* @__PURE__ */ o("div", { ...u({ className: O }), children: [
-                      /* @__PURE__ */ e("input", { ...l() }),
-                      i ? /* @__PURE__ */ e(
+                    return /* @__PURE__ */ n("div", { ...p({ className: B }), children: [
+                      /* @__PURE__ */ a("input", { ...i() }),
+                      l ? /* @__PURE__ */ a(
                         "img",
                         {
-                          src: i.preview,
-                          alt: `Church logo for ${n}`
+                          src: l.preview,
+                          alt: `Church logo for ${o}`
                         }
-                      ) : s ? /* @__PURE__ */ e(
+                      ) : h ? /* @__PURE__ */ a(
                         "img",
                         {
-                          src: s,
-                          alt: `Church logo for ${n}`
+                          src: h,
+                          alt: `Church logo for ${o}`
                         }
-                      ) : /* @__PURE__ */ o(b, { children: [
-                        /* @__PURE__ */ e(
+                      ) : /* @__PURE__ */ n(_, { children: [
+                        /* @__PURE__ */ a(
                           "svg",
                           {
                             width: "64",
                             height: "64",
                             viewBox: "0 0 16 16",
                             "aria-hidden": "true",
-                            children: /* @__PURE__ */ e("path", { d: W })
+                            children: /* @__PURE__ */ a("path", { d: G })
                           }
                         ),
-                        U && C ? /* @__PURE__ */ o(b, { children: [
-                          /* @__PURE__ */ e("h2", { children: "Wrong file type" }),
-                          /* @__PURE__ */ e("p", { children: "Please upload a PNG or JPG file." })
-                        ] }) : /* @__PURE__ */ o(b, { children: [
-                          /* @__PURE__ */ e("h2", { children: "Add church logo" }),
-                          /* @__PURE__ */ e("p", { children: "Use a high-quality image (up to 20mb) with a transparent background." })
+                        C && A ? /* @__PURE__ */ n(_, { children: [
+                          /* @__PURE__ */ a("h2", { children: "Wrong file type" }),
+                          /* @__PURE__ */ a("p", { children: "Please upload a PNG or JPG file." })
+                        ] }) : /* @__PURE__ */ n(_, { children: [
+                          /* @__PURE__ */ a("h2", { children: "Add church logo" }),
+                          /* @__PURE__ */ a("p", { children: "Use a high-quality image (up to 20mb) with a transparent background." })
                         ] })
                       ] })
                     ] });
@@ -251,36 +255,36 @@ function x({
                 }
               )
             ] }),
-            /* @__PURE__ */ o("div", { className: "dialog__actions", children: [
-              s && /* @__PURE__ */ e(
-                N,
+            /* @__PURE__ */ n("div", { className: "pco-org-avatar__dialog-actions", children: [
+              h && /* @__PURE__ */ a(
+                j,
                 {
                   label: "Delete logo",
                   kind: "delete",
-                  onClick: F,
-                  loading: c,
-                  disabled: c,
-                  className: "mr-a"
+                  onClick: O,
+                  loading: d,
+                  disabled: d || c,
+                  className: "pco-org-avatar__dialog-delete"
                 }
               ),
-              /* @__PURE__ */ e(
-                N,
+              /* @__PURE__ */ a(
+                j,
                 {
                   type: "button",
                   label: "Cancel",
                   commandfor: y,
                   command: "close",
-                  disabled: c
+                  disabled: c || d
                 }
               ),
-              /* @__PURE__ */ e(
-                N,
+              /* @__PURE__ */ a(
+                j,
                 {
                   type: "submit",
                   label: "Update logo",
                   kind: "primary",
                   loading: c,
-                  disabled: !i || c
+                  disabled: !l || c || d
                 }
               )
             ] })
@@ -291,33 +295,33 @@ function x({
     )
   ] });
 }
-function te({
-  avatarUrl: a,
-  darkModeAvatarUrl: n,
+function ia({
+  avatarUrl: e,
+  darkModeAvatarUrl: o,
   orgName: r,
   pcoEnv: t,
-  showDarkModeAvatar: d = !1
+  showDarkModeAvatar: s = !1
 }) {
-  const [i, g] = p(a), [s, f] = p(
-    n
-  ), c = (_, h) => {
-    _ === "avatar" ? g(h) : _ === "dark_mode_avatar" && f(h);
+  const [l, m] = u(e), [h, f] = u(
+    o
+  ), c = (d, v) => {
+    d === "avatar" ? m(v) : d === "dark_mode_avatar" && f(v);
   };
-  return /* @__PURE__ */ o("div", { className: "d-f g-1", children: [
-    /* @__PURE__ */ e(
-      x,
+  return /* @__PURE__ */ n("div", { className: "pco-org-avatars", children: [
+    /* @__PURE__ */ a(
+      R,
       {
-        avatarUrl: i,
+        avatarUrl: l,
         organization: r,
         mode: "avatar",
         pcoEnv: t,
         onAvatarUpdate: c
       }
     ),
-    d && /* @__PURE__ */ e(
-      x,
+    s && /* @__PURE__ */ a(
+      R,
       {
-        avatarUrl: s || i,
+        avatarUrl: h || l,
         organization: r,
         mode: "dark_mode_avatar",
         pcoEnv: t,
@@ -327,5 +331,5 @@ function te({
   ] });
 }
 export {
-  te as OrganizationAvatars
+  ia as OrganizationAvatars
 };

package/dist/style.css

@@ -1,3 +1,8 @@
+.pco-org-avatars {
+  display: flex;
+  gap: var(--t-spacing-1);
+}
+
 .pco-org-avatar {
   align-items: center;
   display: inline-flex;
@@ -6,7 +11,7 @@
 }
 
 .pco-org-avatar__button {
-  background: transparent;
+  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);
@@ -24,23 +29,17 @@
   vertical-align: middle;
 }
 
-.pco-org-avatar__button span {
-  background: var(--t-fill-color-interaction);
-  border-radius: var(--t-border-radius-md);
+.pco-org-avatar__button div {
   bottom: var(--t-spacing-1);
-  box-shadow: 0 var(--t-spacing-half) var(--t-spacing-1)
-    var(--t-fill-color-transparency-dark-static-020);
-  color: var(--t-icon-color-inverted);
   opacity: 0;
-  padding: var(--t-spacing-1);
   position: absolute;
   right: var(--t-spacing-1);
   transition: all 0.1s linear;
   visibility: hidden;
 }
 
-.pco-org-avatar__button:hover span,
-.pco-org-avatar__button:focus-within span {
+.pco-org-avatar__button:hover div,
+.pco-org-avatar__button:focus-visible div {
   opacity: 1;
   visibility: visible;
 }
@@ -50,7 +49,107 @@
   font-size: var(--t-font-size-sm);
 }
 
-.pco-org-avatar__dropzone {
+.pco-org-avatar__dialog {
+  background: var(--t-surface-color-canvas);
+  border: 0;
+  border-radius: var(--t-border-radius-lg);
+  box-shadow: 0 0 20px rgb(0 0 0 / 0.15);
+  margin: var(--t-spacing-2) auto;
+  max-height: calc(100% - calc(var(--t-spacing-2) * 2));
+  max-width: 600px;
+  padding: var(--t-spacing-1) 0;
+  position: relative;
+  width: calc(100% - var(--t-spacing-4));
+}
+
+@media (min-width: 600px) {
+  .pco-org-avatar__dialog {
+    margin-block: var(--t-spacing-6);
+    max-height: calc(100% - calc(var(--t-spacing-6) * 2));
+  }
+}
+
+.pco-org-avatar__dialog::backdrop {
+  background: rgb(0 0 0 / 0.4);
+}
+
+.pco-org-avatar__dialog-title {
+  font-size: var(--t-font-size-2xl);
+  overflow: hidden;
+  margin: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.pco-org-avatar__dialog-close {
+  background: transparent;
+  border-color: transparent;
+  color: var(--t-icon-color-dim);
+  cursor: pointer;
+  display: grid;
+  height: var(--t-spacing-4);
+  padding: 0;
+  place-items: center;
+  width: var(--t-spacing-4);
+}
+
+.pco-org-avatar__dialog-header,
+.pco-org-avatar__dialog-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--t-spacing-1);
+  padding: var(--t-spacing-2) var(--t-spacing-4);
+}
+
+.pco-org-avatar__dialog-header {
+  justify-content: space-between;
+}
+
+.pco-org-avatar__dialog-body {
+  padding: var(--t-spacing-2) var(--t-spacing-4);
+  margin-bottom: var(--t-spacing-2);
+}
+
+.pco-org-avatar__dialog-body > :last-child {
+  margin-bottom: 0;
+}
+
+.pco-org-avatar__dialog-actions {
+  border-top: var(--t-border-width) solid var(--t-border-color);
+  justify-content: flex-end;
+}
+
+.pco-org-avatar__dialog-delete {
+  margin-right: auto;
+}
+
+.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);
+}
+
+.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 {
   aspect-ratio: 16 / 9;
   border: var(--t-border-width-thick) dashed var(--t-border-color);
   border-radius: var(--t-border-radius-md);
@@ -65,59 +164,64 @@
   user-select: none;
 }
 
-.pco-org-avatar__dropzone svg {
+.pco-org-avatar__dialog-dropzone svg {
   fill: var(--t-icon-color-status-info);
 }
 
-.pco-org-avatar__dropzone h2 {
+.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__dropzone p {
+.pco-org-avatar__dialog-dropzone p {
   color: var(--t-text-color-placeholder);
   font-size: var(--t-font-size-sm);
   margin: 0;
 }
 
-.pco-org-avatar__dropzone img {
+.pco-org-avatar__dialog-dropzone img {
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   vertical-align: middle;
 }
 
-.pco-org-avatar__dropzone--focused {
+.pco-org-avatar__dialog-dropzone:not(
+    .pco-org-avatar__dialog-dropzone:has(img),
+    .pco-org-avatar__dialog-dropzone--accepted,
+    .pco-org-avatar__dialog-dropzone--rejected
+  ):hover,
+.pco-org-avatar__dialog-dropzone--focused {
   outline: 2px solid var(--t-fill-color-interaction);
   outline-offset: 1px;
 }
 
-.pco-org-avatar__dropzone--accepted {
+.pco-org-avatar__dialog-dropzone--accepted {
   background: var(--t-fill-color-status-info-dim);
   border-color: var(--t-border-color-button-info);
 }
 
-.pco-org-avatar__dropzone--rejected {
+.pco-org-avatar__dialog-dropzone--rejected {
   background: var(--t-fill-color-status-error-dim);
   border-color: var(--t-border-color-status-error);
 }
 
-.pco-org-avatar__dropzone--rejected svg {
+.pco-org-avatar__dialog-dropzone--rejected svg {
   fill: var(--t-fill-color-status-error);
 }
 
 /* Light mode background - static regardless of UI theme */
 .pco-org-avatar__button--light:has(img),
-.pco-org-avatar__dropzone--light:has(img) {
+.pco-org-avatar__dialog-dropzone--light:has(img) {
   background: hsl(0, 0%, 100%);
   border-color: transparent;
 }
 
 /* Dark mode background - static regardless of UI theme */
 .pco-org-avatar__button--dark:has(img),
-.pco-org-avatar__dropzone--dark:has(img) {
+.pco-org-avatar__dialog-dropzone--dark:has(img) {
   background: hsl(0, 0%, 12%);
   border-color: transparent;
 }

package/dist/types.d.ts

@@ -1,15 +1,16 @@
+import type { Environment } from "@planningcenter/url";
 export type OrganizationAvatarsProps = {
     avatarUrl?: string;
     darkModeAvatarUrl?: string;
     orgName: string;
-    pcoEnv?: string;
+    pcoEnv?: Environment;
     showDarkModeAvatar?: boolean;
 };
 export type OrganizationAvatarProps = {
     avatarUrl?: string;
     organization: string;
     mode: "avatar" | "dark_mode_avatar";
-    pcoEnv?: string;
+    pcoEnv?: Environment;
     onAvatarUpdate: (attrName: string, newUrl: string) => void;
 };
 export type FileWithPreview = File & {

package/dist/utils.d.ts

@@ -1 +1,2 @@
 export declare function getCsrfToken(): string;
+export declare function capitalize(content: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/organization-avatars",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "Organization avatar upload components for Planning Center apps",
   "type": "module",
   "packageManager": "yarn@1.22.22",