@orangelogic/design-system 2.114.0 → 2.116.0

package/library/chunks/{time.BiQnh9wt.js → time.BSmpFe2G.js}

@@ -111,8 +111,8 @@ export {
   D as M,
   m as S,
   a as U,
-  N as a,
+  w as a,
   H as c,
-  w as f,
+  N as f,
   y as g
 };

package/library/chunks/waveform.1U9U_0rd.js

@@ -0,0 +1,60 @@
+function $(o, l, u, e, c, n) {
+  let r = -1, a = -1;
+  for (let t = e; t < c; t++)
+    for (let s = 0; s < u; s++) {
+      const i = (s * l + t) * 4;
+      (0.299 * o[i] + 0.587 * o[i + 1] + 0.114 * o[i + 2]) / 255 < n && o[i + 3] > 128 && (r === -1 && (r = s), a = s);
+    }
+  return r === -1 ? 0 : (a - r) / u;
+}
+async function p(o, l) {
+  const u = l?.threshold ?? 0.92;
+  try {
+    const e = new Image();
+    e.crossOrigin = "anonymous", e.src = o, await e.decode();
+    const { naturalHeight: c, naturalWidth: n } = e, r = l?.sampleCount ?? n, a = document.createElement("canvas");
+    a.width = n, a.height = c;
+    const t = a.getContext("2d");
+    if (!t)
+      return null;
+    let s;
+    try {
+      t.drawImage(e, 0, 0), s = t.getImageData(0, 0, n, c);
+    } catch {
+      return null;
+    }
+    const { data: i } = s, m = [];
+    for (let h = 0; h < r; h++) {
+      const f = Math.floor(h / r * n), x = Math.floor((h + 1) / r * n);
+      m.push($(i, n, c, f, x === f ? f + 1 : x, u));
+    }
+    const d = Math.max(...m), g = d > 0 ? m.map((h) => h / d) : m;
+    return { height: c, peaks: g, width: n };
+  } catch {
+    return null;
+  }
+}
+function F(o, l, u) {
+  if (o.length === 0)
+    return "";
+  const e = u / 2, c = u / 2, n = o.length, r = l / n, a = [`M0 ${(e - o[0] * c).toFixed(2)}`];
+  for (let t = 0; t < n - 1; t++)
+    a.push(
+      `H${((t + 1) * r).toFixed(2)}`,
+      `V${(e - o[t + 1] * c).toFixed(2)}`
+    );
+  a.push(
+    `H${l}`,
+    `V${(e + o[n - 1] * c).toFixed(2)}`
+  );
+  for (let t = n - 1; t > 0; t--)
+    a.push(
+      `H${(t * r).toFixed(2)}`,
+      `V${(e + o[t - 1] * c).toFixed(2)}`
+    );
+  return a.push("H0", "Z"), a.join(" ");
+}
+export {
+  F as b,
+  p as e
+};

package/library/components/asset-link-format.js

@@ -3,7 +3,7 @@ import { C as B } from "../chunks/button.DwJEeW2t.js";
 import _ from "./space.js";
 import { C as F } from "../chunks/typography.DJC_UXgs.js";
 import { n, C as W } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { b as rt, c as ht } from "../chunks/asset.Drl4D1c7.js";
+import { c as rt, d as ht } from "../chunks/asset.D_xAgoOX.js";
 import { c as E } from "../chunks/component.styles.CRO4Odto.js";
 import { U as a, T as l } from "../chunks/asset-link-format.B0c92pSs.js";
 import { c as N } from "../chunks/custom-element.L4WJXn1j.js";

package/library/components/atoms.js

@@ -19,7 +19,7 @@ import { default as K } from "./date-calendar.js";
 import { default as W } from "./details.js";
 import { C as Y } from "../chunks/dialog.BYCWepBc.js";
 import { default as _ } from "./divider.js";
-import { C as oe } from "../chunks/document-viewer.Cui5mV3v.js";
+import { C as oe } from "../chunks/document-viewer.CKCX8ueu.js";
 import { C as ae } from "../chunks/dot-pagination.C4l5vKor.js";
 import { default as xe } from "./dot-status.js";
 import { default as me } from "./drawer.js";
@@ -74,7 +74,7 @@ import { default as Uo } from "./stepper.js";
 import { default as Xo } from "./switch.js";
 import { default as Zo } from "./tab.js";
 import { C as et } from "../chunks/tab-group.DvMX02hY.js";
-import { C as tt } from "../chunks/table.DLrle5SR.js";
+import { C as tt } from "../chunks/table.GCs54Y2t.js";
 import { default as rt } from "./tab-panel.js";
 import { default as ft } from "./tag.js";
 import { default as st } from "./textarea.js";

package/library/components/audio.js

@@ -1,45 +1,27 @@
-import { r as m, R as y } from "../chunks/resizable-component.styles.DpK0TTP5.js";
+import { r as f, R as y } from "../chunks/resizable-component.styles.DpK0TTP5.js";
 import { c as v } from "../chunks/component.styles.CRO4Odto.js";
-import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as S } from "../chunks/i18n.CH-wak_P.js";
-import { w as f } from "../chunks/watch.CThbualB.js";
-import { i as w, x as p } from "../chunks/lit-element.jLBm65_O.js";
-import { n as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { r as u } from "../chunks/state.CSDxrqLd.js";
-import { r as x } from "../chunks/query-async.CTgXGyQ5.js";
+import { U as u, g, f as x, D as w } from "../chunks/time.BSmpFe2G.js";
+import { c as _ } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as b } from "../chunks/i18n.CH-wak_P.js";
+import { w as m } from "../chunks/watch.CThbualB.js";
+import { e as S, b as P } from "../chunks/waveform.1U9U_0rd.js";
+import { i as $, b as z, x as h } from "../chunks/lit-element.jLBm65_O.js";
+import { n } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { r as s } from "../chunks/state.CSDxrqLd.js";
+import { e as E } from "../chunks/query.BBf1UFkC.js";
 import { e as C } from "../chunks/class-map.BiVq-cVR.js";
 import { n as d } from "../chunks/when.Dr1es41R.js";
-import { C as b } from "../chunks/icon-button.CQiBjznj.js";
-import { C as W } from "../chunks/typography.DJC_UXgs.js";
-const _ = w`:host{background-color:var(--background-color,var(--cx-color-neutral-0));border-radius:var(--border-radius,0px);border:var(--border,0px);box-sizing:border-box;color:var(--text-color,var(--cx-color-neutral));height:var(--height,auto);width:var(--width,100%);border-style:solid;display:block;position:relative}.audio{border-radius:inherit;gap:var(--cx-spacing-x-small,4px);height:100%;padding:var(--cx-spacing-small,8px);flex-direction:column;justify-content:center;display:flex;overflow:hidden}.audio--empty{height:var(--height,200px);min-height:var(--min-height,100%);padding:0}.audio--empty:before{background-color:var(--cx-color-neutral-1000);color:var(--cx-color-neutral-0);content:attr(data-empty-label);font-family:var(--cx-font-sans);font-size:clamp(var(--cx-font-size-x-small), 4cqw, var(--cx-font-size-large));font-weight:var(--cx-font-weight-semibold);text-align:center;height:100%;text-shadow:.05em .05em .1em var(--cx-color-neutral-1000);justify-content:center;align-items:center;width:100%;line-height:1;display:flex}.audio__play-button{--cx-input-border-width:2px;--cx-input-border-color:var(--text-color,var(--cx-color-neutral))}.audio__play-button::part(base){width:50px;height:50px;color:var(--text-color,var(--cx-color-neutral))!important}.audio__player{align-items:center;gap:var(--cx-spacing-small,8px);display:flex}.audio__waveform{flex:1;min-width:0;overflow:hidden}.audio__footer{font-size:var(--cx-font-size-x-small,11px);color:var(--text-color,var(--cx-color-neutral));flex-direction:column;gap:0;padding-left:2px;display:flex}.audio__time{color:var(--text-color,var(--cx-color-neutral));font-variant-numeric:tabular-nums}.audio__filename{opacity:.75;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}`;
-var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (e, t, r, o) => {
-  for (var i = o > 1 ? void 0 : o ? z(t, r) : t, s = e.length - 1, l; s >= 0; s--)
-    (l = e[s]) && (i = (o ? l(t, r, i) : l(i)) || i);
-  return o && i && P(t, r, i), i;
+import { C as k } from "../chunks/icon-button.CQiBjznj.js";
+import { C as T } from "../chunks/typography.DJC_UXgs.js";
+const A = $`audio{display:none}:host{background-color:var(--background-color,var(--cx-color-neutral-0));border-radius:var(--border-radius,0px);border:var(--border,0px);box-sizing:border-box;color:var(--text-color,var(--cx-color-neutral));height:var(--height,auto);width:var(--width,100%);border-style:solid;display:block;position:relative}.audio{border-radius:inherit;gap:var(--cx-spacing-x-small,4px);height:100%;padding:var(--cx-spacing-small,8px);flex-direction:column;justify-content:center;display:flex;overflow:hidden}.audio--empty{height:var(--height,200px);min-height:var(--min-height,100%);padding:0}.audio--empty:before{background-color:var(--cx-color-neutral-1000);color:var(--cx-color-neutral-0);content:attr(data-empty-label);font-family:var(--cx-font-sans);font-size:clamp(var(--cx-font-size-x-small), 4cqw, var(--cx-font-size-large));font-weight:var(--cx-font-weight-semibold);text-align:center;height:100%;text-shadow:.05em .05em .1em var(--cx-color-neutral-1000);justify-content:center;align-items:center;width:100%;line-height:1;display:flex}.audio__play-button{--cx-input-border-width:2px;--cx-input-border-color:var(--text-color,var(--cx-color-neutral))}.audio__play-button::part(base){width:50px;height:50px;color:var(--text-color,var(--cx-color-neutral))!important}.audio__player{align-items:center;gap:var(--cx-spacing-small,8px);height:148px;display:flex}.audio__waveform{flex:1;min-width:0;overflow:hidden}.audio__waveform-svg{cursor:pointer;flex:1;width:100%;min-width:0;height:100%;display:block;overflow:hidden}.audio__waveform-wave{fill:var(--waves-color,var(--cx-color-primary))}.audio__waveform-played{fill:var(--played-color,color-mix(in srgb, var(--waves-color,var(--cx-color-primary)) 50%, white))}.audio__waveform-playhead{fill:var(--playhead-color,var(--cx-color-neutral-0));opacity:.9}.audio__footer{font-size:var(--cx-font-size-x-small,11px);color:var(--text-color,var(--cx-color-neutral));flex-direction:column;gap:0;padding-left:2px;display:flex}.audio__time{color:var(--text-color,var(--cx-color-neutral));font-variant-numeric:tabular-nums}.audio__filename{opacity:.75;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}`;
+var B = Object.defineProperty, W = Object.getOwnPropertyDescriptor, i = (t, a, o, r) => {
+  for (var l = r > 1 ? void 0 : r ? W(a, o) : a, c = t.length - 1, p; c >= 0; c--)
+    (p = t[c]) && (l = (r ? p(a, o, l) : p(l)) || l);
+  return r && l && B(a, o, l), l;
 };
-function $(e) {
-  const t = "light-dark(";
-  if (!e.startsWith(t) || !e.endsWith(")"))
-    return null;
-  const r = e.slice(t.length, -1);
-  let o = 0, i = -1;
-  for (let h = 0; h < r.length; h++)
-    if (r[h] === "(")
-      o++;
-    else if (r[h] === ")")
-      o--;
-    else if (r[h] === "," && o === 0) {
-      i = h;
-      break;
-    }
-  if (i === -1)
-    return null;
-  const s = r.slice(0, i).trim(), l = r.slice(i + 1).trim();
-  return !CSS.supports("color", s) || !CSS.supports("color", l) ? null : [s, l];
-}
-let a = class extends y {
+let e = class extends y {
   constructor() {
-    super(), this.localize = new S(this), this.waveSurfer = null, this.srcLoadVersion = 0, this.src = "", this.name = "", this.autoplay = !1, this.loop = !1, this.waveColor = ["", ""], this.isPlaying = !1, this.isLoaded = !1, this.isError = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0, this.onWaveSurferReady = this.onWaveSurferReady.bind(this), this.onWaveSurferPlay = this.onWaveSurferPlay.bind(this), this.onWaveSurferPause = this.onWaveSurferPause.bind(this), this.onWaveSurferTimeUpdate = this.onWaveSurferTimeUpdate.bind(this), this.onWaveSurferFinish = this.onWaveSurferFinish.bind(this), this.onWaveSurferError = this.onWaveSurferError.bind(this);
+    super(...arguments), this.localize = new b(this), this.srcLoadVersion = 0, this.extractWaveformPeaks = S, this.src = "", this.name = "", this.autoplay = !1, this.loop = !1, this.waveformSrc = "", this.isPlaying = !1, this.isLoaded = !1, this.isError = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0, this.waveformPath = "", this.waveformViewBoxWidth = 1e3, this.playedFraction = 0, this.audioSrc = "";
   }
   runConnectedCallback() {
     this.hasUpdated && this.requestUpdate("src");
@@ -50,188 +32,155 @@ let a = class extends y {
   async handleSrcChange() {
     await this.applySrc(this.src);
   }
-  async applySrc(e) {
-    const t = ++this.srcLoadVersion;
-    if (this.isLoaded = !1, this.isPlaying = !1, !e) {
+  async applySrc(t) {
+    const a = ++this.srcLoadVersion;
+    if (this.isLoaded = !1, this.isPlaying = !1, !this.waveformSrc) {
       this.cleanUp();
       return;
     }
-    await this.waveformContainerAsync, !(t !== this.srcLoadVersion || !this.isConnected) && await this.setupWaveSurfer(e, t);
+    await this.setupPngWaveform(t, a);
   }
-  async handleWaveColorThemeChange() {
-    this.src && this.waveSurfer && (await this.updateComplete, this.waveSurfer.setOptions(this.setupColors()));
+  updated(t) {
+    super.updated(t), (t.has("width") || t.has("height") || t.has("resizeSize")) && this.handleSizeChange();
   }
-  updated(e) {
-    super.updated(e), (e.has("width") || e.has("height") || e.has("resizeSize")) && this.handleSizeChange();
+  cleanUp() {
+    this.audioEl?.pause(), this.audioSrc = "", this.waveformPath = "", this.waveformViewBoxWidth = 1e3, this.playedFraction = 0, this.isLoaded = !1, this.isPlaying = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0;
   }
-  onWaveSurferReady() {
-    this.isLoaded = !0, this.durationSeconds = this.waveSurfer.getDuration();
+  async setupPngWaveform(t, a) {
+    this.cleanUp();
+    const o = await this.extractWaveformPeaks(this.waveformSrc);
+    if (a !== this.srcLoadVersion || !this.isConnected)
+      return;
+    if (!o) {
+      this.isError = !0, this.emit("cx-error");
+      return;
+    }
+    const r = o.peaks.length;
+    this.waveformViewBoxWidth = r, this.waveformPath = P(o.peaks, r, 200), t && (this.audioSrc = t), this.isLoaded = !0, this.autoplay && t && (await this.updateComplete, this.audioEl?.play());
   }
-  onWaveSurferPlay() {
+  handleAudioPlay() {
     this.isPlaying = !0, this.emit("cx-play");
   }
-  onWaveSurferPause() {
+  handleAudioPause() {
     this.isPlaying = !1, this.emit("cx-pause");
   }
-  onWaveSurferTimeUpdate(e) {
-    this.currentTimeSeconds = e, this.emit("cx-time-update", {
-      detail: {
-        time: e
-      }
-    });
+  handleAudioTimeUpdate() {
+    if (!this.audioEl)
+      return;
+    const t = this.audioEl.duration ? this.audioEl.currentTime / this.audioEl.duration : 0;
+    this.playedFraction = t, this.style.setProperty("--played-fraction", String(t)), this.currentTimeSeconds = this.audioEl.currentTime, this.emit("cx-time-update", { detail: { time: this.audioEl.currentTime } });
+  }
+  handleAudioDurationChange() {
+    this.durationSeconds = this.audioEl?.duration || 0;
   }
-  onWaveSurferFinish() {
+  handleAudioEnded() {
     this.isPlaying = !1, this.emit("cx-ended");
   }
-  onWaveSurferError() {
-    this.isError = !0, this.emit("cx-error");
-  }
-  resolveColorValue(e) {
-    if (!e.startsWith("var("))
-      return e;
-    const t = e.match(/var\(\s*(--[\w-]+)/)?.[1];
-    return t && getComputedStyle(this).getPropertyValue(t).trim() || e;
-  }
-  computeCursorColor(e) {
-    const t = document.createElement("canvas");
-    t.width = 1, t.height = 1;
-    const r = t.getContext("2d");
-    if (!r)
-      return e;
-    r.fillStyle = e, r.fillRect(0, 0, 1, 1);
-    const [o, i, s] = r.getImageData(0, 0, 1, 1).data;
-    return (0.299 * o + 0.587 * i + 0.114 * s) / 255 > 0.5 ? `rgb(${Math.round(o * 0.5)}, ${Math.round(i * 0.5)}, ${Math.round(s * 0.5)})` : `rgb(${Math.round(o + (255 - o) * 0.5)}, ${Math.round(i + (255 - i) * 0.5)}, ${Math.round(s + (255 - s) * 0.5)})`;
-  }
-  setupColors() {
-    const t = getComputedStyle(this).getPropertyValue("--cx-color-primary").trim(), r = (this.theme === "dark" ? this.waveColor[1] : this.waveColor[0]) || t, o = this.resolveColorValue(r), i = this.resolveColorValue(
-      this.theme === "dark" ? this.waveColor[1] : this.waveColor[0]
-    ), s = this.computeCursorColor(o);
-    return {
-      cursorColor: s,
-      progressColor: s,
-      waveColor: i
-    };
-  }
-  async setupWaveSurfer(e, t = this.srcLoadVersion) {
-    this.cleanUp();
-    const r = await this.waveformContainerAsync;
-    if (t !== this.srcLoadVersion || !r || !e || !this.isConnected)
-      return;
-    const { default: o } = await import("../chunks/wavesurfer.esm.Cwi1pz64.js");
-    t !== this.srcLoadVersion || !this.isConnected || (this.waveSurfer = o.create({
-      barGap: 1,
-      barRadius: 2,
-      barWidth: 2,
-      container: r,
-      height: "auto",
-      normalize: !0,
-      url: e,
-      ...this.setupColors()
-    }), this.attachWaveSurferEvents(), this.autoplay && this.waveSurfer.play());
-  }
-  attachWaveSurferEvents() {
-    this.waveSurfer && (this.waveSurfer.on("ready", this.onWaveSurferReady), this.waveSurfer.on("play", this.onWaveSurferPlay), this.waveSurfer.on("pause", this.onWaveSurferPause), this.waveSurfer.on("timeupdate", this.onWaveSurferTimeUpdate), this.waveSurfer.on("finish", this.onWaveSurferFinish), this.waveSurfer.on("error", this.onWaveSurferError));
-  }
-  cleanUp() {
-    this.waveSurfer && (this.waveSurfer.destroy(), this.waveSurfer = null), this.isLoaded = !1, this.isPlaying = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0;
+  handleAudioError() {
+    this.audioSrc && (this.isError = !0, this.emit("cx-error"));
   }
   handleSizeChange() {
-    const e = this.isResizing ? `${this.resizeSize.width}px` : this.width, t = this.isResizing ? `${this.resizeSize.height}px` : this.height;
-    this.width || this.isResizing ? this.style.setProperty("--width", e) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", t) : this.style.removeProperty("--height");
+    const t = this.isResizing ? `${this.resizeSize.width}px` : this.width, a = this.isResizing ? `${this.resizeSize.height}px` : this.height;
+    this.width || this.isResizing ? this.style.setProperty("--width", t) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", a) : this.style.removeProperty("--height");
   }
   /** Starts audio playback. */
   play() {
-    this.waveSurfer?.play();
+    this.audioEl?.play();
   }
   /** Pauses audio playback. */
   pause() {
-    this.waveSurfer?.pause();
+    this.audioEl?.pause();
   }
   /** Toggles between play and pause. */
   togglePlay() {
     this.isPlaying ? this.pause() : this.play();
   }
-  formatTime(e) {
-    const t = Math.floor(e / 60), r = Math.floor(e % 60);
-    return `${t}:${r.toString().padStart(2, "0")}`;
+  formatTime(t) {
+    const o = this.durationSeconds >= 3600 ? u.HourMinuteSecond : u.MinuteSecond, r = g(t * 1e3, o);
+    return x(r, w.Digital);
+  }
+  handleWaveformClick(t) {
+    if (t.stopPropagation(), !this.audioEl || !this.durationSeconds)
+      return;
+    const o = t.currentTarget.getBoundingClientRect(), r = Math.max(0, Math.min(1, (t.clientX - o.left) / o.width));
+    this.audioEl.currentTime = r * this.durationSeconds;
   }
-  handlePlayButtonKeyDown(e) {
-    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.togglePlay());
+  handlePlayButtonKeyDown(t) {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.togglePlay());
   }
   render() {
-    const e = !this.src, t = this.formatTime(this.currentTimeSeconds), r = this.formatTime(this.durationSeconds);
-    return p`<div part="base" class=${C({ audio: !0, "audio--empty": e })} data-empty-label=${this.localize.term("emptyAudio")} @click=${this.startResizing}>${d(
-      !e,
-      () => p`<div part="player" class="audio__player"><cx-icon-button part="play-button" class="audio__play-button" aria-pressed=${String(this.isPlaying)} circle label=${this.localize.term(this.isPlaying ? "pause" : "play")} name=${this.isPlaying ? "pause" : "play_arrow"} variant="filled" outline @click=${this.togglePlay} @keydown=${this.handlePlayButtonKeyDown}></cx-icon-button><div part="waveform" class="audio__waveform"></div></div><div part="footer" class="audio__footer"><cx-typography part="time" variant="small" class="audio__time">${t} / ${r}</cx-typography>${d(
+    const t = !this.src && !this.waveformSrc, a = this.formatTime(this.currentTimeSeconds), o = this.formatTime(this.durationSeconds);
+    return h`<audio src=${this.audioSrc} ?loop=${this.loop} @play=${this.handleAudioPlay} @pause=${this.handleAudioPause} @timeupdate=${this.handleAudioTimeUpdate} @durationchange=${this.handleAudioDurationChange} @ended=${this.handleAudioEnded} @error=${this.handleAudioError}></audio><div part="base" class=${C({ audio: !0, "audio--empty": t })} data-empty-label=${this.localize.term("emptyAudio")} @click=${this.startResizing}>${d(
+      !t,
+      () => h`<div part="player" class="audio__player"><cx-icon-button part="play-button" class="audio__play-button" aria-pressed=${String(this.isPlaying)} circle label=${this.localize.term(this.isPlaying ? "pause" : "play")} name=${this.isPlaying ? "pause" : "play_arrow"} variant="filled" outline @click=${this.togglePlay} @keydown=${this.handlePlayButtonKeyDown}></cx-icon-button>${d(
+        this.waveformPath,
+        () => z`<svg class="audio__waveform-svg" part="waveform-svg" viewBox="0 0 ${this.waveformViewBoxWidth} 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" @click=${this.handleWaveformClick}><path class="audio__waveform-wave" d=${this.waveformPath} /><svg x="0" y="0" width=${String(Math.round(this.playedFraction * this.waveformViewBoxWidth))} height="200" overflow="hidden"><path class="audio__waveform-played" d=${this.waveformPath} /></svg><rect class="audio__waveform-playhead" x=${String(Math.max(0, Math.round(this.playedFraction * this.waveformViewBoxWidth) - 1))} y="0" width="2" height="200"/></svg>`,
+        () => h`<div part="waveform" class="audio__waveform"></div>`
+      )}</div><div part="footer" class="audio__footer"><cx-typography part="time" variant="small" class="audio__time">${a} / ${o}</cx-typography>${d(
         this.name,
-        () => p`<cx-typography part="filename" class="audio__filename">${this.name}</cx-typography>`
+        () => h`<cx-typography part="filename" class="audio__filename">${this.name}</cx-typography>`
       )}</div>`
     )}</div>${d(this.resizable && this.isResizeActive, () => this.renderResizer())}
     `;
   }
 };
-a.styles = [v, m, _];
-a.dependencies = {
-  "cx-icon-button": b,
-  "cx-typography": W
+e.styles = [v, f, A];
+e.dependencies = {
+  "cx-icon-button": k,
+  "cx-typography": T
 };
-n([
-  x(".audio__waveform")
-], a.prototype, "waveformContainerAsync", 2);
-n([
-  c({ reflect: !0, type: String })
-], a.prototype, "src", 2);
-n([
-  c({ reflect: !0, type: String })
-], a.prototype, "name", 2);
-n([
-  c({ reflect: !0, type: Boolean })
-], a.prototype, "autoplay", 2);
-n([
-  c({ reflect: !0, type: Boolean })
-], a.prototype, "loop", 2);
-n([
-  c({
-    attribute: "wave-color",
-    converter: {
-      fromAttribute(e) {
-        if (!e)
-          return ["", ""];
-        const t = $(e);
-        return t || (CSS.supports("color", e) ? [e, e] : ["", ""]);
-      },
-      toAttribute([e, t]) {
-        return e === t ? e : `light-dark(${e}, ${t})`;
-      }
-    },
-    reflect: !0
-  })
-], a.prototype, "waveColor", 2);
-n([
-  u()
-], a.prototype, "isPlaying", 2);
-n([
-  u()
-], a.prototype, "isLoaded", 2);
-n([
-  u()
-], a.prototype, "isError", 2);
-n([
-  u()
-], a.prototype, "currentTimeSeconds", 2);
-n([
-  u()
-], a.prototype, "durationSeconds", 2);
-n([
-  f("src")
-], a.prototype, "handleSrcChange", 1);
-n([
-  f("theme", { waitUntilFirstUpdate: !0 }),
-  f("waveColor", { waitUntilFirstUpdate: !0 })
-], a.prototype, "handleWaveColorThemeChange", 1);
-a = n([
-  g("cx-audio")
-], a);
+i([
+  E("audio")
+], e.prototype, "audioEl", 2);
+i([
+  n({ reflect: !0, type: String })
+], e.prototype, "src", 2);
+i([
+  n({ reflect: !0, type: String })
+], e.prototype, "name", 2);
+i([
+  n({ reflect: !0, type: Boolean })
+], e.prototype, "autoplay", 2);
+i([
+  n({ reflect: !0, type: Boolean })
+], e.prototype, "loop", 2);
+i([
+  n({ attribute: "waveform-src", reflect: !0, type: String })
+], e.prototype, "waveformSrc", 2);
+i([
+  s()
+], e.prototype, "isPlaying", 2);
+i([
+  s()
+], e.prototype, "isLoaded", 2);
+i([
+  s()
+], e.prototype, "isError", 2);
+i([
+  s()
+], e.prototype, "currentTimeSeconds", 2);
+i([
+  s()
+], e.prototype, "durationSeconds", 2);
+i([
+  s()
+], e.prototype, "waveformPath", 2);
+i([
+  s()
+], e.prototype, "waveformViewBoxWidth", 2);
+i([
+  s()
+], e.prototype, "playedFraction", 2);
+i([
+  s()
+], e.prototype, "audioSrc", 2);
+i([
+  m("waveformSrc", { waitUntilFirstUpdate: !0 }),
+  m("src")
+], e.prototype, "handleSrcChange", 1);
+e = i([
+  _("cx-audio")
+], e);
 export {
-  a as default
+  e as default
 };

package/library/components/color-swatch-group.js

@@ -1,10 +1,10 @@
 import "./space.js";
-import "../chunks/table.DLrle5SR.js";
+import "../chunks/table.GCs54Y2t.js";
 import "../chunks/typography.DJC_UXgs.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/color-swatch.DVzEaNeL.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as w } from "../chunks/color-swatch-group.5Mqr0rNP.js";
+import { C as w } from "../chunks/color-swatch-group.BvLicLI4.js";
 import "../chunks/content-builder.OsUmm8Wu.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.CIEhztrj.js";

package/library/components/document-viewer.js

@@ -1,5 +1,5 @@
 import "../chunks/resizable-component.styles.DpK0TTP5.js";
-import { C as b } from "../chunks/document-viewer.Cui5mV3v.js";
+import { C as b } from "../chunks/document-viewer.CKCX8ueu.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/index.Cpamj0jB.js";
 import "../chunks/custom-element.L4WJXn1j.js";

package/library/components/format-time.js

@@ -1,6 +1,6 @@
 import { n as l, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as y } from "../chunks/component.styles.CRO4Odto.js";
-import { U as r, D as u, L as D, F as d, g as S, f as F, c as U, a as g, S as _ } from "../chunks/time.BiQnh9wt.js";
+import { U as r, D as u, L as D, F as d, g as S, a as F, c as U, f as g, S as _ } from "../chunks/time.BSmpFe2G.js";
 import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as N } from "../chunks/i18n.CH-wak_P.js";
 import { w as m } from "../chunks/watch.CThbualB.js";

package/library/components/list-editor.js

@@ -9,7 +9,7 @@ import "./radio.js";
 import "./radio-group.js";
 import "./select.js";
 import "./space.js";
-import "../chunks/table.DLrle5SR.js";
+import "../chunks/table.GCs54Y2t.js";
 import "../chunks/typography.DJC_UXgs.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "./dynamic-select.js";
@@ -18,7 +18,7 @@ import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.CIEhztrj.js";
 import "../chunks/i18n.CH-wak_P.js";
 import "../chunks/watch.CThbualB.js";
-import { c as E, C as F } from "../chunks/list-editor.BBgFSBlF.js";
+import { c as E, C as F } from "../chunks/list-editor.on8VVRn-.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/molecules.js

@@ -6,7 +6,7 @@ import { default as s } from "./corner-position-input-group.js";
 import { default as m } from "./cropper.js";
 import { default as i } from "./dynamic-select.js";
 import { C as c } from "../chunks/folder-select.Bc9x2hMO.js";
-import { C as P } from "../chunks/list-editor.BBgFSBlF.js";
+import { C as P } from "../chunks/list-editor.on8VVRn-.js";
 import { default as I } from "./masonry.js";
 import { default as y } from "./padding-input-group.js";
 import { default as w } from "./position-picker.js";

package/library/components/organisms.js

@@ -1,5 +1,5 @@
 import { default as a } from "./asset-link-format.js";
-import { C as t } from "../chunks/color-swatch-group.5Mqr0rNP.js";
+import { C as t } from "../chunks/color-swatch-group.BvLicLI4.js";
 import { C } from "../chunks/file-on-demand.AwMj4AfO.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/table.js

@@ -9,7 +9,7 @@ import "./spinner.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/overlayscrollbars.BMav4RQ4.js";
-import { A as z, k as F, l as P, d as S, g, b as y, i as A, m as D, n as I, c as f, a2 as h, a3 as E, D as G, o as H, E as j, p as k, F as K, q as L, r as V, s as q, G as B, t as J, u as N, j as O, v as Q, I as U, w as W, K as X, x as Y, M as Z, y as _, z as $, B as oo, J as eo, L as ao, N as so, O as lo, P as to, e as uo, Q as ro, h as Mo, U as io, V as po, W as mo, X as no, f as Co, R as Ro, Z as co, Y as bo, S as wo, _ as To, $ as vo, T as xo, a as zo, a0 as Fo, a1 as Po, C as So } from "../chunks/table.DLrle5SR.js";
+import { A as z, l as F, m as P, d as g, h as y, b as A, j as S, n as D, o as I, c as f, a3 as h, a4 as E, D as G, p as H, E as j, q as k, F as K, r as L, s as V, t as q, G as B, u as J, v as N, k as O, w as Q, I as U, x as W, K as X, y as Y, M as Z, z as _, B as $, J as oo, L as eo, N as ao, O as so, Q as lo, P as to, e as uo, U as ro, i as Mo, V as io, W as po, X as mo, Y as no, g as Co, R as Ro, _ as co, Z as bo, f as wo, $ as To, a0 as vo, T as xo, a as zo, a1 as Fo, a2 as Po, C as go } from "../chunks/table.GCs54Y2t.js";
 import "../chunks/pagination.zQ2FFtxB.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.CH-wak_P.js";
@@ -23,10 +23,10 @@ export {
   z as AccessibilityModule,
   F as AccessorModule,
   P as AjaxModule,
-  S as CalcComponent,
-  g as Cell,
-  y as CellComponent,
-  A as ClickableCellModule,
+  g as CalcComponent,
+  y as Cell,
+  A as CellComponent,
+  S as ClickableCellModule,
   D as ClipboardModule,
   I as ColumnCalcsModule,
   f as ColumnComponent,
@@ -76,5 +76,5 @@ export {
   zo as TabulatorFull,
   Fo as TooltipModule,
   Po as ValidateModule,
-  So as default
+  go as default
 };