@protonradio/proton-ui 0.8.3 → 0.8.4

package/dist/index.es.js

@@ -9503,7 +9503,61 @@ function t4(t) {
     /* @__PURE__ */ b.jsx(Bv, { ...t })
   ] }) : null;
 }
-const Kv = dt(
+const Kv = (t) => {
+  const [e, n, r] = t, l = e + n + r;
+  if (l < 65) {
+    const i = l / 100;
+    return `rgba(255, 255, 255, ${Math.max(0.14, 0.36 - i)})`;
+  }
+  return "";
+};
+function n4({
+  image: t,
+  imageUrl: e = "",
+  onLoad: n
+}) {
+  const { palette: r } = Ae(), l = Rc(r.BASE_COLOR), i = Kv(l);
+  return /* @__PURE__ */ b.jsxs(
+    "div",
+    {
+      id: "background",
+      "aria-label": "Background overlay",
+      role: "dialog",
+      "aria-modal": "true",
+      className: U(
+        "proton-ScreenOverlay__background",
+        "proton-ScreenOverlay__overlay"
+      ),
+      children: [
+        t ? /* @__PURE__ */ b.jsx("div", { "aria-hidden": "true", children: t }) : /* @__PURE__ */ b.jsx(
+          "img",
+          {
+            alt: "",
+            src: e,
+            className: "proton-ScreenOverlay__image",
+            onLoad: (o) => n == null ? void 0 : n(o.currentTarget),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ b.jsx(
+          "div",
+          {
+            className: "proton-ScreenOverlay__blur",
+            "aria-hidden": "true",
+            style: {
+              background: i,
+              // NOTE: We were receiving reports of backdrop filter not working on Safari. Explicitly defining the filter here instead works.
+              WebkitBackdropFilter: "blur(24px) brightness(75%)",
+              backdropFilter: "blur(24px) brightness(75%)",
+              filter: "brightness(50%)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+const Mv = dt(
   ({
     prefix: t,
     suffix: e,
@@ -9607,7 +9661,7 @@ const Kv = dt(
       ) : n && r === "bottom" ? /* @__PURE__ */ b.jsx("div", { ...w, className: "proton-Input__text", children: n }) : null
     ] });
   }
-), n4 = ({
+), r4 = ({
   name: t = "search",
   placeholder: e = "Search...",
   autoComplete: n,
@@ -9640,7 +9694,7 @@ const Kv = dt(
       "data-testid": u,
       role: "search",
       children: /* @__PURE__ */ b.jsx(
-        Kv,
+        Mv,
         {
           ...p,
           type: "search",
@@ -9724,7 +9778,7 @@ const Kv = dt(
     }
   );
 };
-function r4(t) {
+function l4(t) {
   const e = M(null), n = Rn(t || {}), { triggerProps: r, overlayProps: l } = ro(
     { type: "dialog" },
     n,
@@ -9793,7 +9847,7 @@ class ol {
     this.value = null, this.level = 0, this.hasChildNodes = !1, this.rendered = null, this.textValue = "", this["aria-label"] = void 0, this.index = 0, this.parentKey = null, this.prevKey = null, this.nextKey = null, this.firstChildKey = null, this.lastChildKey = null, this.props = {}, this.type = e, this.key = n;
   }
 }
-class Mv {
+class Iv {
   get size() {
     return this.keyMap.size;
   }
@@ -9985,7 +10039,7 @@ class Ut extends Xs {
     super(n), this.nodeType = 8, this._index = 0, this.hasSetProps = !1, this.node = new ol(e, `react-aria-${++n.nodeId}`), this.ownerDocument.startTransaction();
   }
 }
-class Iv extends Xs {
+class Fv extends Xs {
   get isConnected() {
     return this.isMounted;
   }
@@ -10095,8 +10149,8 @@ if (typeof HTMLTemplateElement < "u") {
     }
   });
 }
-const Kr = /* @__PURE__ */ Q(!1), Fv = typeof DocumentFragment < "u" ? new DocumentFragment() : null;
-function _v(t) {
+const Kr = /* @__PURE__ */ Q(!1), _v = typeof DocumentFragment < "u" ? new DocumentFragment() : null;
+function Rv(t) {
   let e = Y(Kr), n = nt();
   if (e)
     return /* @__PURE__ */ A.createElement(A.Fragment, null, t.children);
@@ -10105,9 +10159,9 @@ function _v(t) {
   }, t.children);
   return n ? /* @__PURE__ */ A.createElement("template", {
     "data-react-aria-hidden": !0
-  }, r) : /* @__PURE__ */ gi(r, Fv);
+  }, r) : /* @__PURE__ */ gi(r, _v);
 }
-function Rv(t) {
+function Nv(t) {
   let e = (n, r) => Y(Kr) ? null : t(n, r);
   return e.displayName = t.displayName || t.name, dt(e);
 }
@@ -10122,7 +10176,7 @@ var Mr = { exports: {} }, ur = {};
  * LICENSE file in the root directory of this source tree.
  */
 var ci;
-function Nv() {
+function Lv() {
   if (ci) return ur;
   ci = 1;
   var t = A;
@@ -10167,7 +10221,7 @@ var sr = {};
  * LICENSE file in the root directory of this source tree.
  */
 var di;
-function Lv() {
+function Ov() {
   return di || (di = 1, process.env.NODE_ENV !== "production" && function() {
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
     var t = A, e = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -10237,35 +10291,35 @@ function Lv() {
     sr.useSyncExternalStore = x, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
   }()), sr;
 }
-process.env.NODE_ENV === "production" ? Mr.exports = Nv() : Mr.exports = Lv();
-var Ov = Mr.exports;
+process.env.NODE_ENV === "production" ? Mr.exports = Lv() : Mr.exports = Ov();
+var zv = Mr.exports;
 const Js = /* @__PURE__ */ Q(!1), Gt = /* @__PURE__ */ Q(null);
-function zv(t) {
+function jv(t) {
   if (Y(Gt))
     return t.content;
-  let { collection: n, document: r } = Wv(t.createCollection);
-  return /* @__PURE__ */ A.createElement(A.Fragment, null, /* @__PURE__ */ A.createElement(_v, null, /* @__PURE__ */ A.createElement(Gt.Provider, {
+  let { collection: n, document: r } = Uv(t.createCollection);
+  return /* @__PURE__ */ A.createElement(A.Fragment, null, /* @__PURE__ */ A.createElement(Rv, null, /* @__PURE__ */ A.createElement(Gt.Provider, {
     value: r
-  }, t.content)), /* @__PURE__ */ A.createElement(jv, {
+  }, t.content)), /* @__PURE__ */ A.createElement(Vv, {
     render: t.children,
     collection: n
   }));
 }
-function jv({ collection: t, render: e }) {
+function Vv({ collection: t, render: e }) {
   return e(t);
 }
-function Vv(t, e, n) {
+function Hv(t, e, n) {
   let r = nt(), l = M(r);
   l.current = r;
   let i = X(() => l.current ? n() : e(), [
     e,
     n
   ]);
-  return Ov.useSyncExternalStore(t, i);
+  return zv.useSyncExternalStore(t, i);
 }
-const Hv = typeof A.useSyncExternalStore == "function" ? A.useSyncExternalStore : Vv;
-function Wv(t) {
-  let [e] = z(() => new Iv((t == null ? void 0 : t()) || new Mv())), n = X((o) => e.subscribe(o), [
+const Wv = typeof A.useSyncExternalStore == "function" ? A.useSyncExternalStore : Hv;
+function Uv(t) {
+  let [e] = z(() => new Fv((t == null ? void 0 : t()) || new Iv())), n = X((o) => e.subscribe(o), [
     e
   ]), r = X(() => {
     let o = e.getCollection();
@@ -10274,7 +10328,7 @@ function Wv(t) {
     e
   ]), l = X(() => (e.isSSR = !0, e.getCollection()), [
     e
-  ]), i = Hv(n, r, l);
+  ]), i = Wv(n, r, l);
   return J(() => (e.isMounted = !0, () => {
     e.isMounted = !1;
   }), [
@@ -10285,7 +10339,7 @@ function Wv(t) {
   };
 }
 const Ir = /* @__PURE__ */ Q(null);
-function Uv(t, e, n, r, l, i) {
+function Gv(t, e, n, r, l, i) {
   let o = X((u) => {
     u == null || u.setProps(e, n, r, i);
   }, [
@@ -10304,32 +10358,32 @@ function Uv(t, e, n, r, l, i) {
     ref: o
   }, l);
 }
-function Gv(t, e) {
+function Yv(t, e) {
   let n = ({ node: l }) => e(l.props, l.props.ref, l), r = dt((l, i) => {
     if (!Y(Js)) {
       if (e.length >= 3) throw new Error(e.name + " cannot be rendered outside a collection.");
       return e(l, i);
     }
-    return Uv(t, l, i, "children" in l ? l.children : null, null, (a) => /* @__PURE__ */ A.createElement(n, {
+    return Gv(t, l, i, "children" in l ? l.children : null, null, (a) => /* @__PURE__ */ A.createElement(n, {
       node: a
     }));
   });
   return r.displayName = e.name, r;
 }
-function Yv(t) {
+function qv(t) {
   return Zs({
     ...t,
     addIdAndValue: !0
   });
 }
 const fi = /* @__PURE__ */ Q(null);
-function qv(t) {
-  let e = Y(fi), n = ((e == null ? void 0 : e.dependencies) || []).concat(t.dependencies), r = t.idScope || (e == null ? void 0 : e.idScope), l = Yv({
+function Xv(t) {
+  let e = Y(fi), n = ((e == null ? void 0 : e.dependencies) || []).concat(t.dependencies), r = t.idScope || (e == null ? void 0 : e.idScope), l = qv({
     ...t,
     idScope: r,
     dependencies: n
   });
-  return Y(Gt) && (l = /* @__PURE__ */ A.createElement(Xv, null, l)), e = H(() => ({
+  return Y(Gt) && (l = /* @__PURE__ */ A.createElement(Zv, null, l)), e = H(() => ({
     dependencies: n,
     idScope: r
   }), [
@@ -10339,7 +10393,7 @@ function qv(t) {
     value: e
   }, l);
 }
-function Xv({ children: t }) {
+function Zv({ children: t }) {
   let e = Y(Gt), n = H(() => /* @__PURE__ */ A.createElement(Gt.Provider, {
     value: null
   }, /* @__PURE__ */ A.createElement(Js.Provider, {
@@ -10351,7 +10405,7 @@ function Xv({ children: t }) {
     value: e
   }, n) : /* @__PURE__ */ gi(n, e);
 }
-const Zv = /* @__PURE__ */ Q(null), Jv = {
+const Jv = /* @__PURE__ */ Q(null), Qv = {
   CollectionRoot({ collection: t, renderDropIndicator: e }) {
     return pi(t, null, e);
   },
@@ -10382,8 +10436,8 @@ function pi(t, e, n) {
     }
   });
 }
-const Qs = /* @__PURE__ */ Q(Jv);
-function Qv(t) {
+const Qs = /* @__PURE__ */ Q(Qv);
+function eh(t) {
   return H(() => t != null ? /* @__PURE__ */ new Set([
     t
   ]) : null, [
@@ -10469,7 +10523,7 @@ function Zt(t, e, n) {
     o
   ];
 }
-function eh() {
+function th() {
   let [t, e] = z(!0), n = M(!1), r = X((l) => {
     n.current = !0, e(!!l);
   }, []);
@@ -10480,11 +10534,11 @@ function eh() {
     t
   ];
 }
-function th(t, e = !0) {
+function nh(t, e = !0) {
   let [n, r] = z(!0);
   return tc(t, n && e, X(() => r(!1), [])), n && e;
 }
-function nh(t, e) {
+function rh(t, e) {
   let [n, r] = z(!1), [l, i] = z("idle");
   return !e && t.current && l === "idle" && (n = !0, r(!0), i("exiting")), !t.current && l === "exited" && i("idle"), tc(t, n, X(() => {
     i("exited"), r(!1);
@@ -10512,7 +10566,7 @@ function tc(t, e, n) {
     n
   ]);
 }
-const rh = /* @__PURE__ */ Q(null), lh = /* @__PURE__ */ new Set([
+const lh = /* @__PURE__ */ Q(null), ih = /* @__PURE__ */ new Set([
   "form",
   "formAction",
   "formEncType",
@@ -10521,9 +10575,9 @@ const rh = /* @__PURE__ */ Q(null), lh = /* @__PURE__ */ new Set([
   "formTarget",
   "name",
   "value"
-]), ih = /* @__PURE__ */ Q({});
-function oh(t, e) {
-  [t, e] = Zt(t, e, ih), t = ah(t);
+]), oh = /* @__PURE__ */ Q({});
+function ah(t, e) {
+  [t, e] = Zt(t, e, oh), t = uh(t);
   let n = t, { isPending: r } = n, { buttonProps: l, isPressed: i } = Fn(t, e), { focusProps: o, isFocused: a, isFocusVisible: u } = Xt(t), { hoverProps: s, isHovered: c } = kt({
     ...t,
     isDisabled: t.isDisabled || r
@@ -10553,7 +10607,7 @@ function oh(t, e) {
     p
   ]), /* @__PURE__ */ A.createElement("button", {
     ...pe(t, {
-      propNames: lh
+      propNames: ih
     }),
     ...W(l, o, s),
     ...f,
@@ -10568,19 +10622,19 @@ function oh(t, e) {
     "data-focused": a || void 0,
     "data-pending": r || void 0,
     "data-focus-visible": u || void 0
-  }, /* @__PURE__ */ A.createElement(rh.Provider, {
+  }, /* @__PURE__ */ A.createElement(lh.Provider, {
     value: {
       id: m
     }
   }, f.children));
 }
-function ah(t) {
+function uh(t) {
   return t.isPending && (t.onPress = void 0, t.onPressStart = void 0, t.onPressEnd = void 0, t.onPressChange = void 0, t.onPressUp = void 0, t.onKeyDown = void 0, t.onKeyUp = void 0, t.onClick = void 0, t.href = void 0), t;
 }
-const nc = /* @__PURE__ */ Rv(oh), uh = /* @__PURE__ */ Q({}), sh = /* @__PURE__ */ Q({}), ch = /* @__PURE__ */ Q({}), rc = /* @__PURE__ */ Q({
+const nc = /* @__PURE__ */ Nv(ah), sh = /* @__PURE__ */ Q({}), ch = /* @__PURE__ */ Q({}), dh = /* @__PURE__ */ Q({}), rc = /* @__PURE__ */ Q({
   placement: "bottom"
 });
-function dh(t, e) {
+function fh(t, e) {
   [t, e] = Zt(t, e, rc);
   let n = t.placement, r = {
     position: "absolute",
@@ -10604,8 +10658,8 @@ function dh(t, e) {
     "data-placement": n
   });
 }
-const fh = /* @__PURE__ */ dt(dh), Fr = /* @__PURE__ */ Q(null), ph = /* @__PURE__ */ Q(null), vh = /* @__PURE__ */ Q({}), lc = /* @__PURE__ */ Q(null), al = /* @__PURE__ */ Q(null), ic = /* @__PURE__ */ Q(null);
-function hh(t) {
+const ph = /* @__PURE__ */ dt(fh), Fr = /* @__PURE__ */ Q(null), vh = /* @__PURE__ */ Q(null), hh = /* @__PURE__ */ Q({}), lc = /* @__PURE__ */ Q(null), al = /* @__PURE__ */ Q(null), ic = /* @__PURE__ */ Q(null);
+function mh(t) {
   let e = Xp(t), n = M(null), { menuTriggerProps: r, menuProps: l } = Ta({
     ...t,
     type: "menu"
@@ -10629,7 +10683,7 @@ function hh(t) {
         }
       ],
       [
-        ph,
+        vh,
         e
       ],
       [
@@ -10655,17 +10709,17 @@ function hh(t) {
     isPressed: e.isOpen
   }, t.children));
 }
-const mh = /* @__PURE__ */ Q(null);
-function bh(t, e) {
-  return [t, e] = Zt(t, e, lc), /* @__PURE__ */ A.createElement(zv, {
-    content: /* @__PURE__ */ A.createElement(qv, t)
-  }, (n) => n.size > 0 && /* @__PURE__ */ A.createElement(gh, {
+const bh = /* @__PURE__ */ Q(null);
+function gh(t, e) {
+  return [t, e] = Zt(t, e, lc), /* @__PURE__ */ A.createElement(jv, {
+    content: /* @__PURE__ */ A.createElement(Xv, t)
+  }, (n) => n.size > 0 && /* @__PURE__ */ A.createElement(yh, {
     props: t,
     collection: n,
     menuRef: e
   }));
 }
-function gh({ props: t, collection: e, menuRef: n }) {
+function yh({ props: t, collection: e, menuRef: n }) {
   let r = Hs({
     ...t,
     collection: e,
@@ -10716,7 +10770,7 @@ function gh({ props: t, collection: e, menuRef: n }) {
         r
       ],
       [
-        ch,
+        dh,
         {
           elementType: "div"
         }
@@ -10728,13 +10782,13 @@ function gh({ props: t, collection: e, menuRef: n }) {
         }
       ],
       [
-        Zv,
+        Jv,
         {
-          render: $h
+          render: xh
         }
       ],
       [
-        mh,
+        bh,
         {
           parentMenuRef: n
         }
@@ -10746,7 +10800,7 @@ function gh({ props: t, collection: e, menuRef: n }) {
     ]
   }, /* @__PURE__ */ A.createElement(a, {
     collection: e,
-    persistedKeys: Qv(r.selectionManager.focusedKey),
+    persistedKeys: eh(r.selectionManager.focusedKey),
     scrollRef: n
   }))), /* @__PURE__ */ A.createElement("div", {
     ref: i,
@@ -10758,10 +10812,10 @@ function gh({ props: t, collection: e, menuRef: n }) {
     }
   }));
 }
-const yh = /* @__PURE__ */ dt(bh);
-function $h(t, e, n) {
+const $h = /* @__PURE__ */ dt(gh);
+function xh(t, e, n) {
   var r, l;
-  let i = Y(al), { CollectionBranch: o } = Y(Qs), [a, u] = eh();
+  let i = Y(al), { CollectionBranch: o } = Y(Qs), [a, u] = th();
   var s;
   let { headingProps: c, groupProps: d } = up({
     heading: u,
@@ -10777,7 +10831,7 @@ function $h(t, e, n) {
     ...d,
     ...f,
     ref: e
-  }, /* @__PURE__ */ A.createElement(sh.Provider, {
+  }, /* @__PURE__ */ A.createElement(ch.Provider, {
     value: {
       ...c,
       ref: a
@@ -10787,7 +10841,7 @@ function $h(t, e, n) {
     parent: n
   })));
 }
-const _r = /* @__PURE__ */ Q(null), xh = /* @__PURE__ */ Gv("item", function(e, n, r) {
+const _r = /* @__PURE__ */ Q(null), Eh = /* @__PURE__ */ Yv("item", function(e, n, r) {
   var l;
   [e, n] = Zt(e, n, _r);
   let i = (l = ec(_r)) === null || l === void 0 ? void 0 : l.id, o = Y(al), a = Dn(n), { menuItemProps: u, labelProps: s, descriptionProps: c, keyboardShortcutProps: d, ...f } = Ka({
@@ -10827,7 +10881,7 @@ const _r = /* @__PURE__ */ Q(null), xh = /* @__PURE__ */ Gv("item", function(e,
   }, /* @__PURE__ */ A.createElement(Ln, {
     values: [
       [
-        uh,
+        sh,
         {
           slots: {
             label: s,
@@ -10836,13 +10890,13 @@ const _r = /* @__PURE__ */ Q(null), xh = /* @__PURE__ */ Gv("item", function(e,
         }
       ],
       [
-        vh,
+        hh,
         d
       ]
     ]
   }, C.children));
 }), ul = /* @__PURE__ */ Q(null), oc = /* @__PURE__ */ Q(null);
-function Eh(t) {
+function Sh(t) {
   let e = Vs(t), n = M(null), { triggerProps: r, tooltipProps: l } = Up(t, e, n);
   return /* @__PURE__ */ A.createElement(Ln, {
     values: [
@@ -10863,19 +10917,19 @@ function Eh(t) {
     ref: n
   }, t.children));
 }
-function Sh({ UNSTABLE_portalContainer: t, ...e }, n) {
+function Ch({ UNSTABLE_portalContainer: t, ...e }, n) {
   [e, n] = Zt(e, n, oc);
-  let r = Y(ul), l = Vs(e), i = e.isOpen != null || e.defaultOpen != null || !r ? l : r, o = nh(n, i.isOpen) || e.isExiting || !1;
+  let r = Y(ul), l = Vs(e), i = e.isOpen != null || e.defaultOpen != null || !r ? l : r, o = rh(n, i.isOpen) || e.isExiting || !1;
   return !i.isOpen && !o ? null : /* @__PURE__ */ A.createElement(Vf, {
     portalContainer: t
-  }, /* @__PURE__ */ A.createElement(wh, {
+  }, /* @__PURE__ */ A.createElement(Ph, {
     ...e,
     tooltipRef: n,
     isExiting: o
   }));
 }
-const Ch = /* @__PURE__ */ dt(Sh);
-function wh(t) {
+const wh = /* @__PURE__ */ dt(Ch);
+function Ph(t) {
   let e = Y(ul), n = M(null), [r, l] = z(0);
   J(() => {
     n.current && e.isOpen && l(n.current.getBoundingClientRect().width);
@@ -10893,7 +10947,7 @@ function wh(t) {
     arrowSize: r,
     arrowBoundaryOffset: t.arrowBoundaryOffset,
     shouldFlip: t.shouldFlip
-  }), u = th(t.tooltipRef, !!a) || t.isEntering || !1, s = At({
+  }), u = nh(t.tooltipRef, !!a) || t.isEntering || !1, s = At({
     ...t,
     defaultClassName: "react-aria-Tooltip",
     values: {
@@ -10936,14 +10990,14 @@ function ac(t, e = "down") {
     return i.addEventListener("change", o), () => i.removeEventListener("change", o);
   }, [n]), r;
 }
-const Ph = ({ size: t }) => /* @__PURE__ */ b.jsx("svg", { viewBox: "0 0 24 24", width: t, height: t, children: /* @__PURE__ */ b.jsx(
+const Dh = ({ size: t }) => /* @__PURE__ */ b.jsx("svg", { viewBox: "0 0 24 24", width: t, height: t, children: /* @__PURE__ */ b.jsx(
   "path",
   {
     fill: "currentColor",
     d: "M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
   }
 ) });
-function l4({
+function i4({
   renderTrigger: t,
   menuId: e,
   size: n = 24,
@@ -10965,7 +11019,7 @@ function l4({
       onPress: () => d((g) => !g),
       isDisabled: l,
       className: `proton-ResponsiveMenuTrigger__button ${u}`,
-      children: /* @__PURE__ */ b.jsx(Ph, { size: n })
+      children: /* @__PURE__ */ b.jsx(Dh, { size: n })
     }
   ), y = t ? t(
     { ...p, onClick: () => d((g) => !g) },
@@ -10988,7 +11042,7 @@ function l4({
         "data-testid": a
       }
     )
-  ] }) : /* @__PURE__ */ b.jsxs(hh, { children: [
+  ] }) : /* @__PURE__ */ b.jsxs(mh, { children: [
     y,
     c && /* @__PURE__ */ b.jsx(
       il,
@@ -11003,14 +11057,14 @@ function l4({
         triggerRef: f,
         arrow: !1,
         children: /* @__PURE__ */ b.jsx(
-          yh,
+          $h,
           {
             className: "proton-ListBox proton-ResponsiveMenuTrigger__menu",
             id: e,
             autoFocus: !0,
             "data-testid": a,
             children: r.map((g) => /* @__PURE__ */ b.jsx(
-              xh,
+              Eh,
               {
                 href: g.to,
                 target: "_blank",
@@ -11041,11 +11095,11 @@ const Rr = (t) => {
       ref: e,
       "data-testid": "listbox",
       className: "proton-ListBox",
-      children: [...n.collection].map((l) => /* @__PURE__ */ b.jsx(Dh, { item: l, state: n }, l.key))
+      children: [...n.collection].map((l) => /* @__PURE__ */ b.jsx(kh, { item: l, state: n }, l.key))
     }
   ) });
 };
-function Dh({ item: t, state: e }) {
+function kh({ item: t, state: e }) {
   let n = M(null), { optionProps: r, isSelected: l, isFocused: i, isDisabled: o } = op(
     { key: t.key },
     e,
@@ -11091,7 +11145,7 @@ const uc = dt(
     );
   }
 );
-function kh({
+function Th({
   label: t,
   name: e,
   isDisabled: n,
@@ -11202,11 +11256,11 @@ function kh({
     }
   );
 }
-const i4 = {
-  Menu: kh,
+const o4 = {
+  Menu: Th,
   Option: Xr
 };
-function Th({
+function Ah({
   label: t,
   name: e,
   isDisabled: n,
@@ -11316,11 +11370,11 @@ function Th({
     }
   );
 }
-const o4 = {
-  Menu: Th,
+const a4 = {
+  Menu: Ah,
   Option: Xr
 };
-function a4(t) {
+function u4(t) {
   let e = {
     ...t,
     isSelected: t.isOn,
@@ -11349,11 +11403,11 @@ function a4(t) {
     }
   );
 }
-function Ah({ item: t, state: e, children: n }) {
+function Bh({ item: t, state: e, children: n }) {
   let r = M(), { rowProps: l } = jp({ node: t }, e);
   return /* @__PURE__ */ b.jsx("tr", { className: U("proton-Table__headerRow"), ...l, ref: r, children: n });
 }
-function Bh({ column: t, state: e }) {
+function Kh({ column: t, state: e }) {
   var u, s;
   let n = M(), { columnHeaderProps: r } = Op(
     { node: t },
@@ -11409,7 +11463,7 @@ function hi({
     }
   );
 }
-function Kh({
+function Mh({
   item: t,
   children: e,
   state: n,
@@ -11443,7 +11497,7 @@ function Kh({
     }
   );
 }
-function Mh({ cell: t, state: e, width: n, onClick: r }) {
+function Ih({ cell: t, state: e, width: n, onClick: r }) {
   let l = M(), { gridCellProps: i } = Vp({ node: t }, e, l), { isFocusVisible: o, focusProps: a } = Xt();
   const { align: u = "left" } = t.props;
   return /* @__PURE__ */ b.jsx(
@@ -11463,8 +11517,8 @@ function Mh({ cell: t, state: e, width: n, onClick: r }) {
     }
   );
 }
-const u4 = uv, s4 = cv, c4 = sv, d4 = av;
-function f4(t) {
+const s4 = uv, c4 = cv, d4 = sv, f4 = av;
+function p4(t) {
   var i;
   let e = ov({
     ...t
@@ -11474,8 +11528,8 @@ function f4(t) {
     n
   );
   return /* @__PURE__ */ b.jsxs("table", { ...l, ref: n, className: U("proton-Table"), children: [
-    /* @__PURE__ */ b.jsx(hi, { type: "thead", isHidden: (i = t.headerProps) == null ? void 0 : i.isHidden, children: r.headerRows.map((o) => /* @__PURE__ */ b.jsx(Ah, { item: o, state: e, children: Array.from(r.getChildren(o.key)).map((a) => /* @__PURE__ */ b.jsx(
-      Bh,
+    /* @__PURE__ */ b.jsx(hi, { type: "thead", isHidden: (i = t.headerProps) == null ? void 0 : i.isHidden, children: r.headerRows.map((o) => /* @__PURE__ */ b.jsx(Bh, { item: o, state: e, children: Array.from(r.getChildren(o.key)).map((a) => /* @__PURE__ */ b.jsx(
+      Kh,
       {
         column: a,
         state: e
@@ -11483,7 +11537,7 @@ function f4(t) {
       a.key
     )) }, o.key)) }),
     /* @__PURE__ */ b.jsx(hi, { type: "tbody", children: Array.from(r.body.childNodes).map((o) => /* @__PURE__ */ b.jsx(
-      Kh,
+      Mh,
       {
         item: o,
         state: e,
@@ -11491,7 +11545,7 @@ function f4(t) {
         showLines: r.body.props.showLines,
         onClick: o.props.onClick,
         children: Array.from(r.getChildren(o.key)).map((a) => /* @__PURE__ */ b.jsx(
-          Mh,
+          Ih,
           {
             cell: a,
             state: e,
@@ -11505,7 +11559,7 @@ function f4(t) {
     )) })
   ] });
 }
-const p4 = ({
+const v4 = ({
   children: t,
   maxWidth: e,
   singleLine: n = !0,
@@ -11528,22 +11582,22 @@ const p4 = ({
     children: t
   }
 );
-function Ih({ children: t, arrow: e, ...n }) {
+function Fh({ children: t, arrow: e, ...n }) {
   const { style: r, className: l } = Ae();
   return /* @__PURE__ */ b.jsxs(
-    Ch,
+    wh,
     {
       ...n,
       className: U("proton__Tooltip", "proton-Dialog", l),
       style: r,
       children: [
-        e && /* @__PURE__ */ b.jsx(fh, { className: U("proton__TooltipArrow", l), children: /* @__PURE__ */ b.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ b.jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        e && /* @__PURE__ */ b.jsx(ph, { className: U("proton__TooltipArrow", l), children: /* @__PURE__ */ b.jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ b.jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         t
       ]
     }
   );
 }
-function Fh({
+function _h({
   children: t,
   // trigger props
   delay: e = 500,
@@ -11558,7 +11612,7 @@ function Fh({
 }) {
   const [s, c] = z(!1), d = M(!1), f = M(!1);
   return a === "" ? null : /* @__PURE__ */ b.jsxs(
-    Eh,
+    Sh,
     {
       delay: e,
       closeDelay: n,
@@ -11580,18 +11634,18 @@ function Fh({
             children: t
           }
         ),
-        /* @__PURE__ */ b.jsx(Ih, { ...u, children: a })
+        /* @__PURE__ */ b.jsx(Fh, { ...u, children: a })
       ]
     }
   );
 }
-const v4 = ({
+const h4 = ({
   to: t,
   children: e,
   tooltipProps: n,
   "data-testid": r
 }) => {
-  const { className: l } = Ae(), i = n ? /* @__PURE__ */ b.jsx(Fh, { delay: 50, closeDelay: 75, ...n, children: e }) : e;
+  const { className: l } = Ae(), i = n ? /* @__PURE__ */ b.jsx(_h, { delay: 50, closeDelay: 75, ...n, children: e }) : e;
   if (t) {
     const o = Nr(t);
     return /* @__PURE__ */ b.jsx(
@@ -11628,8 +11682,36 @@ const v4 = ({
       children: i
     }
   );
+}, m4 = ({
+  width: t = "100%",
+  height: e = "1.5rem",
+  borderRadius: n = "4px"
+}) => {
+  const { theme: r, palette: l } = Ae(), i = {
+    "--tombstone-custom-background": l.PRIMARY.PRIMARY_MEDIUM,
+    "--tombstone-custom-primary": El(
+      l.PRIMARY.PRIMARY_DARK,
+      0.9
+    ),
+    "--tombstone-custom-secondary": El(
+      l.SECONDARY.SECONDARY_DARK,
+      0.7
+    )
+  };
+  return /* @__PURE__ */ b.jsx(
+    "div",
+    {
+      className: `tombstone ${r}`,
+      style: {
+        ...i,
+        width: t,
+        height: e,
+        borderRadius: n
+      }
+    }
+  );
 };
-function _h({
+function Rh({
   amplitude: t,
   isDisabled: e,
   isPlayed: n,
@@ -11697,8 +11779,8 @@ function _h({
     }
   );
 }
-const Rh = zh(100);
-function h4({
+const Nh = jh(100);
+function b4({
   data: t,
   resolution: e = 2,
   startDuration: n,
@@ -11712,11 +11794,11 @@ function h4({
   "data-testid": c
 }) {
   var S;
-  const { className: d } = Ae(), f = M(null), [p, m] = z([]), [y, g] = z(null), [C, x] = z(!1), [$, T] = z(!1), w = t || Rh, P = e;
+  const { className: d } = Ae(), f = M(null), [p, m] = z([]), [y, g] = z(null), [C, x] = z(!1), [$, T] = z(!1), w = t || Nh, P = e;
   L(() => {
     if (!f.current) return;
     const F = (I) => {
-      const re = Math.floor(I / (e + P)), de = Lh(w, re);
+      const re = Math.floor(I / (e + P)), de = Oh(w, re);
       m(de);
     }, k = f.current.clientWidth;
     F(k);
@@ -11740,7 +11822,7 @@ function h4({
     var re;
     const V = F / o * 100;
     return (k === "start" ? Math.floor(V / 100 * p.length) : Math.ceil(V / 100 * p.length)) * B / ((re = f.current) == null ? void 0 : re.clientWidth) * 100;
-  }, D = (S = f.current) == null ? void 0 : S.clientWidth, N = H(() => a && u ? u : t ? null : D < 277 ? "Unavailable" : "Waveform Unavailable", [a, u, t, D]);
+  }, D = (S = f.current) == null ? void 0 : S.clientWidth, N = H(() => a && u ? u : t ? null : "Waveform Unavailable", [a, u, t]);
   return /* @__PURE__ */ b.jsxs("div", { className: U("proton-Waveform", d), "data-testid": c, children: [
     i && /* @__PURE__ */ b.jsx(mi, { direction: "left", seconds: l }),
     /* @__PURE__ */ b.jsxs(
@@ -11780,7 +11862,7 @@ function h4({
           p.map((F, k) => {
             const V = k / p.length * o, I = n !== void 0 && r !== void 0 && (V < n || V > r), re = l === 0 ? !1 : V <= l, de = y !== null && V <= y;
             return /* @__PURE__ */ b.jsx(
-              _h,
+              Rh,
               {
                 amplitude: F,
                 isDisabled: a || I,
@@ -11822,116 +11904,34 @@ function mi({
         "proton-Waveform__timestamp",
         `proton-Waveform__timestamp--${t}`
       ),
-      children: Nh(e)
+      children: Lh(e)
     }
   );
 }
-function Nh(t) {
+function Lh(t) {
   const e = Math.floor(t / 60), n = Math.floor(t % 60);
   return `${e}:${n < 10 ? "0" : ""}${n.toFixed(0)}`;
 }
-function Lh(t, e) {
+function Oh(t, e) {
   const n = t.length, r = n / e, l = new Array(e).fill(0).map((i, o) => {
     const a = o * r, u = Math.floor(a), s = Math.min(u + 1, n - 1), c = a - u;
     return t[u] * (1 - c) + t[s] * c;
   });
-  return Oh(l);
+  return zh(l);
 }
-function Oh(t) {
+function zh(t) {
   const e = Math.min(...t), n = Math.max(...t);
   return t.map((r) => {
     const l = (r - e) / (n - e);
     return Math.max(l * 0.8 + 0.1, 0.1);
   });
 }
-function zh(t) {
+function jh(t) {
   return Array.from({ length: t }, (e, n) => {
     const l = n / (t - 1) * 6 * 2 * Math.PI - Math.PI / 2;
     return Math.sin(l) * 0.5 + 0.5;
   });
 }
-const m4 = ({
-  width: t = "100%",
-  height: e = "1.5rem",
-  borderRadius: n = "4px"
-}) => {
-  const { theme: r, palette: l } = Ae(), i = {
-    "--tombstone-custom-background": l.PRIMARY.PRIMARY_MEDIUM,
-    "--tombstone-custom-primary": El(
-      l.PRIMARY.PRIMARY_DARK,
-      0.9
-    ),
-    "--tombstone-custom-secondary": El(
-      l.SECONDARY.SECONDARY_DARK,
-      0.7
-    )
-  };
-  return /* @__PURE__ */ b.jsx(
-    "div",
-    {
-      className: `tombstone ${r}`,
-      style: {
-        ...i,
-        width: t,
-        height: e,
-        borderRadius: n
-      }
-    }
-  );
-}, jh = (t) => {
-  const [e, n, r] = t, l = e + n + r;
-  if (l < 65) {
-    const i = l / 100;
-    return `rgba(255, 255, 255, ${Math.max(0.14, 0.36 - i)})`;
-  }
-  return "";
-};
-function b4({
-  image: t,
-  imageUrl: e = "",
-  onLoad: n
-}) {
-  const { palette: r } = Ae(), l = Rc(r.BASE_COLOR), i = jh(l);
-  return /* @__PURE__ */ b.jsxs(
-    "div",
-    {
-      id: "background",
-      "aria-label": "Background overlay",
-      role: "dialog",
-      "aria-modal": "true",
-      className: U(
-        "proton-ScreenOverlay__background",
-        "proton-ScreenOverlay__overlay"
-      ),
-      children: [
-        t ? /* @__PURE__ */ b.jsx("div", { "aria-hidden": "true", children: t }) : /* @__PURE__ */ b.jsx(
-          "img",
-          {
-            alt: "",
-            src: e,
-            className: "proton-ScreenOverlay__image",
-            onLoad: (o) => n == null ? void 0 : n(o.currentTarget),
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ b.jsx(
-          "div",
-          {
-            className: "proton-ScreenOverlay__blur",
-            "aria-hidden": "true",
-            style: {
-              background: i,
-              // NOTE: We were receiving reports of backdrop filter not working on Safari. Explicitly defining the filter here instead works.
-              WebkitBackdropFilter: "blur(24px) brightness(75%)",
-              backdropFilter: "blur(24px) brightness(75%)",
-              filter: "brightness(50%)"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
 export {
   Ws as ActionMenu,
   Qh as Badge,
@@ -11940,33 +11940,33 @@ export {
   Gs as Button,
   Tv as ButtonGroup,
   $4 as COLORS,
-  s4 as Cell,
-  u4 as Column,
+  c4 as Cell,
+  s4 as Column,
   e4 as Dialog,
   t4 as Icon,
-  b4 as ImageBackground,
-  Kv as Input,
+  n4 as ImageBackground,
+  Mv as Input,
   il as Popover,
-  l4 as ResponsiveMenuTrigger,
-  o4 as ResponsiveSelect,
-  c4 as Row,
+  i4 as ResponsiveMenuTrigger,
+  a4 as ResponsiveSelect,
+  d4 as Row,
   mv as ScreenOverlay,
-  n4 as SearchInput,
+  r4 as SearchInput,
   qh as Section,
-  i4 as Select,
-  a4 as Switch,
+  o4 as Select,
+  u4 as Switch,
   Pt as THEMES,
-  f4 as Table,
-  d4 as TableBody,
+  p4 as Table,
+  f4 as TableBody,
   Xh as TableHeader,
-  p4 as TextEllipsis,
-  v4 as TextEmphasis,
+  v4 as TextEllipsis,
+  h4 as TextEmphasis,
   Zh as ThemeProvider,
   m4 as Tombstone,
-  Ih as Tooltip,
-  Fh as TooltipTrigger,
-  h4 as Waveform,
-  r4 as usePopoverTrigger,
+  Fh as Tooltip,
+  _h as TooltipTrigger,
+  b4 as Waveform,
+  l4 as usePopoverTrigger,
   Ae as useTheme
 };
 //# sourceMappingURL=index.es.js.map