@planningcenter/organization-avatars 1.3.0 → 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,v]=i.useState(a),[l,h]=i.useState(!1),[f,u]=i.useState(""),j=i.useId(),k=i.useRef(null),x=T(r),S=g=>{const[n]=g;n&&m(Object.assign(n,{preview:URL.createObjectURL(n)}))};i.useEffect(()=>{v(a)},[a]),i.useEffect(()=>()=>{s?.preview&&(URL.revokeObjectURL(s.preview),u(""))},[s]);const A=async g=>{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:g}})}),p=await n.json();if(!n.ok)throw p;return p},z=async g=>{if(g.preventDefault(),!(!s||l)){h(!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`]:""});v(_.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{h(!1)}}},F=async()=>{if(!l){h(!0);try{await A({[`remove_${r}`]:"1"}),v(""),c(r,""),k.current?.close()}catch{u("We were unable to delete your avatar.")}finally{h(!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:"pco-org-avatar__dialog",onClose:R,children:e.jsxs("form",{onSubmit:z,children:[e.jsxs("div",{className:"pco-org-avatar__dialog-header",children:[e.jsxs("h1",{className:"pco-org-avatar__dialog-title",children:["Church logo — ",x," mode"]}),e.jsx("button",{type:"button",commandfor:j,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:w.smallX})})})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-body",children:[f&&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:w.exclamationTriangle})}),e.jsx("p",{children:f})]}),e.jsx(D,{accept:{"image/*":[".jpg",".jpeg",".png"]},multiple:!1,onDropAccepted:S,children:({getRootProps:g,getInputProps:n,isFocused:p,isDragAccept:_,isDragReject:b,isDragActive:y})=>{const q=L("pco-org-avatar__dialog-dropzone",`pco-org-avatar__dialog-dropzone--${x}`,{"pco-org-avatar__dialog-dropzone--image":s||d,"pco-org-avatar__dialog-dropzone--focused":p,"pco-org-avatar__dialog-dropzone--accepted":_,"pco-org-avatar__dialog-dropzone--rejected":y&&b});return e.jsxs("div",{...g({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:"pco-org-avatar__dialog-actions",children:[d&&e.jsx(C.Button,{label:"Delete logo",kind:"delete",onClick:F,loading:l,disabled:l,className:"pco-org-avatar__dialog-delete"}),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,v]=i.useState(o),l=(f,u)=>{f==="avatar"?m(u):f==="dark_mode_avatar"&&v(u)},h=d||s;return e.jsxs("div",{className:"pco-org-avatars",children:[e.jsx(U,{avatarUrl:s,organization:r,mode:"avatar",pcoEnv:t,onAvatarUpdate:l}),c&&e.jsx(U,{avatarUrl:h,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,25 +1,25 @@
-import { jsxs as t, Fragment as b, jsx as a } from "react/jsx-runtime";
-import { useState as g, 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(e) {
-  var n, r, o = "";
-  if (typeof e == "string" || typeof e == "number") o += e;
+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 d = e.length;
-    for (n = 0; n < d; n++) e[n] && (r = R(e[n])) && (o && (o += " "), o += r);
-  } else for (r in e) e[r] && (o && (o += " "), o += r);
-  return o;
+    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 e, n, r = 0, o = "", d = arguments.length; r < d; r++) (e = arguments[r]) && (n = R(e)) && (o && (o += " "), o += n);
-  return o;
+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() {
+function K() {
   const e = document.querySelector('meta[name="csrf-token"]');
   if (!e || !e.content)
     throw new Error(
@@ -27,33 +27,37 @@ function X() {
     );
   return e.content;
 }
-const H = (e) => e === "dark_mode_avatar" ? "dark" : "light";
-function x({
+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: n,
+  organization: o,
   mode: r,
-  pcoEnv: o,
-  onAvatarUpdate: d
+  pcoEnv: t,
+  onAvatarUpdate: s
 }) {
-  const [i, m] = g(null), [s, f] = g(e), [c, v] = g(!1), [_, h] = g(""), y = S(), A = $(null), w = H(r), M = (p) => {
-    const [l] = p;
-    l && m(
-      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(() => {
+  D(() => {
     f(e);
-  }, [e]), j(() => () => {
-    i?.preview && (URL.revokeObjectURL(i.preview), h(""));
-  }, [i]);
-  const z = async (p) => {
-    const l = await fetch(P("accounts", { env: o }), {
+  }, [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({
@@ -61,44 +65,44 @@ function x({
           attributes: p
         }
       })
-    }), u = await l.json();
-    if (!l.ok) throw u;
-    return u;
-  }, D = async (p) => {
-    if (p.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(), u = await new Promise((C, U) => {
-          l.onloadend = () => C(l.result), l.onerror = U, l.readAsDataURL(i);
-        }), k = await z({
-          [r]: u,
+        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), m(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 = () => {
-    m(null), h("");
+  }, $ = () => {
+    m(null), b("");
   };
-  return /* @__PURE__ */ t(b, { children: [
-    /* @__PURE__ */ t("div", { className: "pco-org-avatar", children: [
+  return /* @__PURE__ */ n(_, { children: [
+    /* @__PURE__ */ n("div", { className: "pco-org-avatar", children: [
       /* @__PURE__ */ a(
         "button",
         {
@@ -106,17 +110,17 @@ function x({
           commandfor: y,
           command: "show-modal",
           className: `pco-org-avatar__button pco-org-avatar__button--${w}`,
-          children: s ? /* @__PURE__ */ t(b, { children: [
-            /* @__PURE__ */ a("img", { src: s, alt: `Church logo for ${n}` }),
-            /* @__PURE__ */ a("span", { children: /* @__PURE__ */ a(
+          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__ */ a("path", { d: T })
+                children: /* @__PURE__ */ a("path", { d: E })
               }
             ) })
           ] }) : /* @__PURE__ */ a(
@@ -127,27 +131,27 @@ function x({
               viewBox: "0 0 16 16",
               fill: "currentColor",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ a("path", { d: q })
+              children: /* @__PURE__ */ a("path", { d: J })
             }
           )
         }
       ),
-      /* @__PURE__ */ t("div", { className: "pco-org-avatar__label", children: [
-        w,
+      /* @__PURE__ */ n("div", { className: "pco-org-avatar__label", children: [
+        Q(w),
         " mode"
       ] })
     ] }),
-    B(
+    L(
       /* @__PURE__ */ a(
         "dialog",
         {
           id: y,
-          ref: A,
+          ref: N,
           className: "pco-org-avatar__dialog",
-          onClose: L,
-          children: /* @__PURE__ */ t("form", { onSubmit: D, children: [
-            /* @__PURE__ */ t("div", { className: "pco-org-avatar__dialog-header", children: [
-              /* @__PURE__ */ t("h1", { className: "pco-org-avatar__dialog-title", children: [
+          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"
@@ -168,14 +172,14 @@ function x({
                       viewBox: "0 0 16 16",
                       fill: "currentColor",
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ a("path", { d: E })
+                      children: /* @__PURE__ */ a("path", { d: W })
                     }
                   )
                 }
               )
             ] }),
-            /* @__PURE__ */ t("div", { className: "pco-org-avatar__dialog-body", children: [
-              _ && /* @__PURE__ */ t("div", { role: "alert", className: "pco-org-avatar__dialog-alert", children: [
+            /* @__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",
                   {
@@ -184,50 +188,50 @@ function x({
                     viewBox: "0 0 16 16",
                     className: "symbol",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ a("path", { d: I })
+                    children: /* @__PURE__ */ a("path", { d: q })
                   }
                 ),
-                /* @__PURE__ */ a("p", { children: _ })
+                /* @__PURE__ */ a("p", { children: z })
               ] }),
               /* @__PURE__ */ a(
-                G,
+                X,
                 {
                   accept: { "image/*": [".jpg", ".jpeg", ".png"] },
                   multiple: !1,
-                  onDropAccepted: M,
+                  onDropAccepted: S,
                   children: ({
                     getRootProps: p,
-                    getInputProps: l,
-                    isFocused: u,
+                    getInputProps: i,
+                    isFocused: g,
                     isDragAccept: k,
-                    isDragReject: C,
-                    isDragActive: U
+                    isDragReject: A,
+                    isDragActive: C
                   }) => {
-                    const O = J(
+                    const B = H(
                       "pco-org-avatar__dialog-dropzone",
                       `pco-org-avatar__dialog-dropzone--${w}`,
                       {
-                        "pco-org-avatar__dialog-dropzone--image": i || s,
-                        "pco-org-avatar__dialog-dropzone--focused": u,
+                        "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": U && C
+                        "pco-org-avatar__dialog-dropzone--rejected": C && A
                       }
                     );
-                    return /* @__PURE__ */ t("div", { ...p({ className: O }), children: [
-                      /* @__PURE__ */ a("input", { ...l() }),
-                      i ? /* @__PURE__ */ a(
+                    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__ */ a(
+                      ) : h ? /* @__PURE__ */ a(
                         "img",
                         {
-                          src: s,
-                          alt: `Church logo for ${n}`
+                          src: h,
+                          alt: `Church logo for ${o}`
                         }
-                      ) : /* @__PURE__ */ t(b, { children: [
+                      ) : /* @__PURE__ */ n(_, { children: [
                         /* @__PURE__ */ a(
                           "svg",
                           {
@@ -235,13 +239,13 @@ function x({
                             height: "64",
                             viewBox: "0 0 16 16",
                             "aria-hidden": "true",
-                            children: /* @__PURE__ */ a("path", { d: W })
+                            children: /* @__PURE__ */ a("path", { d: G })
                           }
                         ),
-                        U && C ? /* @__PURE__ */ t(b, { children: [
+                        C && A ? /* @__PURE__ */ n(_, { children: [
                           /* @__PURE__ */ a("h2", { children: "Wrong file type" }),
                           /* @__PURE__ */ a("p", { children: "Please upload a PNG or JPG file." })
-                        ] }) : /* @__PURE__ */ t(b, { children: [
+                        ] }) : /* @__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__ */ t("div", { className: "pco-org-avatar__dialog-actions", children: [
-              s && /* @__PURE__ */ a(
-                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,
+                  onClick: O,
+                  loading: d,
+                  disabled: d || c,
                   className: "pco-org-avatar__dialog-delete"
                 }
               ),
               /* @__PURE__ */ a(
-                N,
+                j,
                 {
                   type: "button",
                   label: "Cancel",
                   commandfor: y,
                   command: "close",
-                  disabled: c
+                  disabled: c || d
                 }
               ),
               /* @__PURE__ */ a(
-                N,
+                j,
                 {
                   type: "submit",
                   label: "Update logo",
                   kind: "primary",
                   loading: c,
-                  disabled: !i || c
+                  disabled: !l || c || d
                 }
               )
             ] })
@@ -291,41 +295,41 @@ function x({
     )
   ] });
 }
-function oa({
+function ia({
   avatarUrl: e,
-  darkModeAvatarUrl: n,
+  darkModeAvatarUrl: o,
   orgName: r,
-  pcoEnv: o,
-  showDarkModeAvatar: d = !1
+  pcoEnv: t,
+  showDarkModeAvatar: s = !1
 }) {
-  const [i, m] = g(e), [s, f] = g(
-    n
-  ), c = (_, h) => {
-    _ === "avatar" ? m(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__ */ t("div", { className: "pco-org-avatars", children: [
+  return /* @__PURE__ */ n("div", { className: "pco-org-avatars", children: [
     /* @__PURE__ */ a(
-      x,
+      R,
       {
-        avatarUrl: i,
+        avatarUrl: l,
         organization: r,
         mode: "avatar",
-        pcoEnv: o,
+        pcoEnv: t,
         onAvatarUpdate: c
       }
     ),
-    d && /* @__PURE__ */ a(
-      x,
+    s && /* @__PURE__ */ a(
+      R,
       {
-        avatarUrl: s || i,
+        avatarUrl: h || l,
         organization: r,
         mode: "dark_mode_avatar",
-        pcoEnv: o,
+        pcoEnv: t,
         onAvatarUpdate: c
       }
     )
   ] });
 }
 export {
-  oa as OrganizationAvatars
+  ia as OrganizationAvatars
 };

package/dist/style.css

@@ -11,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);
@@ -29,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;
 }
@@ -194,6 +188,11 @@
   vertical-align: middle;
 }
 
+.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;

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.3.0",
+  "version": "1.4.0",
   "description": "Organization avatar upload components for Planning Center apps",
   "type": "module",
   "packageManager": "yarn@1.22.22",