@planningcenter/organization-avatars 1.6.1 → 1.6.3

package/dist/index.cjs

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

package/dist/index.js

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

package/package.json

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