@planningcenter/organization-avatars 1.6.1 → 1.6.2

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

package/dist/index.js

@@ -1,120 +1,118 @@
-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 v, 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 R(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 d = a.length;
+    for (o = 0; o < d; o++) a[o] && (r = R(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 = "", d = arguments.length; r < d; r++) (a = arguments[r]) && (o = R(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,
+  readOnly: d,
   onAvatarUpdate: _
 }) {
-  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, u] = v(null), [s, y] = v(!1), [h, b] = v(!1), [A, p] = v(""), c = O(), N = P(null), w = Q(r), M = (g) => {
+    const [i] = g;
+    i && u(
       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), p(""));
   }, [l]);
-  const D = async (p) => {
-    const i = await fetch(W("accounts", { env: t }), {
+  const U = async (g) => {
+    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: g
         }
       })
-    }), v = await i.json();
-    if (!i.ok) throw v;
-    return v;
-  }, $ = async (p) => {
-    if (p.preventDefault(), !(!l || s || h)) {
+    }), m = await i.json();
+    if (!i.ok) throw m;
+    return m;
+  }, S = async (g) => {
+    if (g.preventDefault(), !(!l || s || h)) {
       y(!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({
-          [r]: v,
+        const i = new FileReader(), m = await new Promise((k, C) => {
+          i.onloadend = () => k(i.result), i.onerror = C, i.readAsDataURL(l);
+        }), j = await U({
+          [r]: m,
           [`${r}_cache`]: ""
         });
-        b(U.data.attributes[r].url), m(null), _(r, U.data.attributes[r].url), z.current?.close();
+        u(null), _(r, j.data.attributes[r].url), N.current?.close();
       } catch {
-        k("We were unable to save your avatar.");
+        p("We were unable to save your avatar.");
       } finally {
         y(!1);
       }
     }
-  }, O = async () => {
+  }, F = async () => {
     if (!(s || h)) {
-      w(!0);
+      b(!0);
       try {
-        await D({
+        await U({
           [`remove_${r}`]: "1"
-        }), b(""), _(r, ""), z.current?.close();
+        }), _(r, ""), N.current?.close();
       } catch {
-        k("We were unable to delete your avatar.");
+        p("We were unable to delete your avatar.");
       } finally {
-        w(!1);
+        b(!1);
       }
     }
-  }, P = () => {
-    m(null), k("");
+  }, B = () => {
+    u(null), p("");
   };
   return /* @__PURE__ */ n(f, { children: [
     /* @__PURE__ */ n("div", { className: "pco-org-avatar", children: [
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          commandfor: C,
+          commandfor: c,
           command: "show-modal",
-          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(
+          disabled: d,
+          className: `pco-org-avatar__button pco-org-avatar__button--${w}`,
+          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 +120,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 +132,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 +143,41 @@ 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(w),
         " mode"
       ] })
     ] }),
-    E(
-      /* @__PURE__ */ a(
+    L(
+      /* @__PURE__ */ e(
         "dialog",
         {
-          id: C,
-          ref: z,
+          id: c,
+          ref: N,
           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,
+                w,
                 " mode"
               ] }),
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  commandfor: C,
+                  commandfor: c,
                   command: "close",
                   className: "pco-org-avatar__dialog-close",
                   "aria-label": "Close modal",
-                  children: /* @__PURE__ */ a(
+                  children: /* @__PURE__ */ e(
                     "svg",
                     {
                       width: "16",
@@ -187,15 +185,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(
+              A && /* @__PURE__ */ n("div", { role: "alert", className: "pco-org-avatar__dialog-alert", children: [
+                /* @__PURE__ */ e(
                   "svg",
                   {
                     width: "16",
@@ -203,66 +201,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: A })
               ] }),
-              /* @__PURE__ */ a(
-                H,
+              /* @__PURE__ */ e(
+                J,
                 {
                   accept: { "image/*": [".jpg", ".jpeg", ".png"] },
                   multiple: !1,
-                  onDropAccepted: B,
+                  onDropAccepted: M,
                   children: ({
-                    getRootProps: p,
+                    getRootProps: g,
                     getInputProps: i,
-                    isFocused: v,
-                    isDragAccept: U,
-                    isDragReject: N,
-                    isDragActive: j
+                    isFocused: m,
+                    isDragAccept: j,
+                    isDragReject: k,
+                    isDragActive: C
                   }) => {
-                    const T = K(
+                    const $ = X(
                       "pco-org-avatar__dialog-dropzone",
-                      `pco-org-avatar__dialog-dropzone--${A}`,
+                      `pco-org-avatar__dialog-dropzone--${w}`,
                       {
-                        "pco-org-avatar__dialog-dropzone--image": l || d,
-                        "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--image": l || a,
+                        "pco-org-avatar__dialog-dropzone--focused": m,
+                        "pco-org-avatar__dialog-dropzone--accepted": j,
+                        "pco-org-avatar__dialog-dropzone--rejected": C && k
                       }
                     );
-                    return /* @__PURE__ */ n("div", { ...p({ className: T }), children: [
-                      /* @__PURE__ */ a("input", { ...i() }),
-                      l ? /* @__PURE__ */ a(
+                    return /* @__PURE__ */ n("div", { ...g({ 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." })
+                        C && k ? /* @__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,29 +269,29 @@ 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,
+                  onClick: F,
                   loading: h,
                   disabled: h || s,
                   className: "pco-org-avatar__dialog-delete"
                 }
               ),
-              /* @__PURE__ */ a(
-                x,
+              /* @__PURE__ */ e(
+                z,
                 {
                   type: "button",
                   label: "Cancel",
-                  commandfor: C,
+                  commandfor: c,
                   command: "close",
                   disabled: s || h
                 }
               ),
-              /* @__PURE__ */ a(
-                x,
+              /* @__PURE__ */ e(
+                z,
                 {
                   type: "submit",
                   label: "Update logo",
@@ -310,45 +308,45 @@ function S({
     )
   ] });
 }
-function la({
-  avatarUrl: e,
+function ne({
+  avatarUrl: a,
   darkModeAvatarUrl: o,
   orgName: r,
   onAvatarUpdate: t,
-  pcoEnv: c,
+  pcoEnv: d,
   readOnly: _,
   showDarkModeAvatar: l = !1
 }) {
-  const [m, d] = g(e), [b, s] = g(
+  const [u, s] = v(a), [y, h] = v(
     o
-  ), y = (w, u) => {
-    w === "avatar" ? (d(u), t?.("avatar", u)) : w === "dark_mode_avatar" && (s(u), t?.("dark_mode_avatar", u));
+  ), b = (p, c) => {
+    p === "avatar" ? (s(c), t?.("avatar", c)) : p === "dark_mode_avatar" && (h(c), t?.("dark_mode_avatar", c));
   };
   return /* @__PURE__ */ n("div", { className: "pco-org-avatars", children: [
-    /* @__PURE__ */ a(
-      S,
+    /* @__PURE__ */ e(
+      D,
       {
-        avatarUrl: m,
+        avatarUrl: u,
         organization: r,
         mode: "avatar",
-        pcoEnv: c,
+        pcoEnv: d,
         readOnly: _,
-        onAvatarUpdate: y
+        onAvatarUpdate: b
       }
     ),
-    l && /* @__PURE__ */ a(
-      S,
+    l && /* @__PURE__ */ e(
+      D,
       {
-        avatarUrl: b || m,
+        avatarUrl: y || u,
         organization: r,
         mode: "dark_mode_avatar",
-        pcoEnv: c,
+        pcoEnv: d,
         readOnly: _,
-        onAvatarUpdate: y
+        onAvatarUpdate: b
       }
     )
   ] });
 }
 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.2",
   "description": "Organization avatar upload components for Planning Center apps",
   "type": "module",
   "packageManager": "yarn@1.22.22",