@cling-se/widget 0.15.3 → 0.15.5

package/dist/{HeaderSettings-DeoSRi6O.js → HeaderSettings-CoKK5Mbt.js}

@@ -1,11 +1,13 @@
-import { m as x } from "./mapFormMixin-e2PJ431T.js";
-import { T as w } from "./ThemeColorRow-Cy1NKEIG.js";
-import C from "./VideoPlayerInput-BmbrquN6.js";
-import _ from "./ImageUploadWrapper-CNQRdHF9.js";
-import { B as k, a as b } from "./index-CFwLDxbi.js";
-import { c as v, n as y, o as d, J as S } from "./main-BIwKzAN8.js";
-import { t as A } from "./tinycolor-vIxz4Xgi.js";
-const g = v.unsplash.id, L = v.pexels.id, z = {
+import { m as x } from "./mapFormMixin-BZf4RJIE.js";
+import { T as _ } from "./ThemeColorRow-D3fav4Sl.js";
+import C from "./VideoPlayerInput-Cm3KoRnR.js";
+import w from "./ImageUploadWrapper-CE6KTze0.js";
+import { B as k, a as b } from "./index-DLa3QER7.js";
+import { c as y, n as u, q as d, P as S, k as V, ai as A } from "./main-U22_wtg0.js";
+import { C as L } from "./CFormField-DcZVdj3a.js";
+import { b as z } from "./CDropdownItem-DiLisSei.js";
+import { t as $ } from "./tinycolor-BZ8wGctU.js";
+const v = y.unsplash.id, I = y.pexels.id, B = {
   name: "MediaSelectModal",
   i18nOptions: {
     namespaces: "mediaSelectModal",
@@ -28,7 +30,7 @@ const g = v.unsplash.id, L = v.pexels.id, z = {
     BackgroundModal: k,
     BackgroundList: b,
     VideoPlayerInput: C,
-    ImageUploadWrapper: _
+    ImageUploadWrapper: w
   },
   props: {
     currentType: {
@@ -77,121 +79,164 @@ const g = v.unsplash.id, L = v.pexels.id, z = {
     this.currentType === "video" && (this.activeTab = "pexels");
   },
   methods: {
-    async fetchImage({ query: i, page: t }) {
+    async fetchImage({ query: o, page: t }) {
       const { data: e } = await d.get(
         "https://api.unsplash.com/search/photos",
         {
           params: {
             page: t,
             per_page: 12,
-            client_id: g,
-            query: i
+            client_id: v,
+            query: o
           }
         }
       );
       return {
-        items: (e.results || []).map((o) => ({
-          ...o,
-          image: o.urls.regular,
-          minImage: o.urls.thumb
+        items: (e.results || []).map((i) => ({
+          ...i,
+          image: i.urls.regular,
+          minImage: i.urls.thumb
         })),
         total: e.total
       };
     },
-    async fetchVideo({ query: i, page: t }) {
+    async fetchVideo({ query: o, page: t }) {
       const { data: e } = await d.get("https://api.pexels.com/videos/search", {
         headers: {
-          Authorization: L
+          Authorization: I
         },
         params: {
           page: t,
           per_page: 12,
-          query: i
+          query: o
         }
-      }), o = (s, a) => s.height < a.height || s.width < a.width ? -1 : 1, r = (s) => (s.find(({ height: a }) => a > 1e3 && a < 1200) || {}).link;
+      }), i = (s, a) => s.height < a.height || s.width < a.width ? -1 : 1, r = (s) => (s.find(({ height: a }) => a > 1e3 && a < 1200) || {}).link;
       return {
         items: (e.videos || []).map(
-          ({ id: s, image: a, video_files: u = [], user: m }) => {
-            const { sd: h, hd: p } = (u || []).sort(o).reduce(
-              (n, l) => (n[l.quality] && l.link && n[l.quality].push(l.link), n),
+          ({ id: s, image: a, video_files: m = [], user: h }) => {
+            const { sd: p, hd: g } = (m || []).sort(i).reduce(
+              (c, l) => (c[l.quality] && l.link && c[l.quality].push(l.link), c),
               { sd: [], hd: [] }
-            ), [f] = h;
-            let c = r(u);
-            return c || ([c] = p.length ? p : h.slice(-1)), {
+            ), [f] = p;
+            let n = r(m);
+            return n || ([n] = g.length ? g : p.slice(-1)), {
               id: `${s}`,
               image: a,
               minImage: a,
-              video: c,
+              video: n,
               minVideo: f,
-              userName: m.name,
-              userLink: m.link
+              userName: h.name,
+              userLink: h.link
             };
           }
         ),
         total: e.total_results
       };
     },
-    selectImage({ image: i, links: t, color: e }) {
-      this.selectedImage = S(i, { w: 1800 }), e && (this.preferredColor = e);
-      const o = new Image();
-      o.src = this.selectedImage, d.get(t.download_location, {
+    selectImage({ image: o, links: t, color: e }) {
+      this.selectedImage = S(o, { w: 1800 }), e && (this.preferredColor = e);
+      const i = new Image();
+      i.src = this.selectedImage, d.get(t.download_location, {
         params: {
-          client_id: g
+          client_id: v
         }
       });
     },
-    setCustomBackground({ response: i }) {
-      this.customImage = i.url;
+    setCustomBackground({ response: o }) {
+      this.customImage = o.url;
     },
-    selectVideo({ id: i, image: t, video: e }) {
+    selectVideo({ id: o, image: t, video: e }) {
       this.selectedVideo = {
-        id: i,
+        id: o,
         url: e,
         thumbnail: t,
         provider: "pexels"
       };
     },
     onSave() {
-      let i;
-      this.isImage ? i = {
+      let o;
+      this.isImage ? o = {
         type: "image",
         value: this.activeTab === "unsplash" ? this.selectedImage : this.customImage
-      } : i = {
+      } : o = {
         type: "video",
         value: this.activeTab === "pexels" ? this.selectedVideo : this.customVideo
-      }, this.preferredColor && (i.preferredColor = this.preferredColor), this.$emit("input", i), this.$parent && this.$parent.$emit("input", i), this.$emit("close");
+      }, this.preferredColor && (o.preferredColor = this.preferredColor), this.$emit("input", o), this.$parent && this.$parent.$emit("input", o), this.$emit("close");
     }
   }
 };
-var I = function() {
+var M = function() {
   var t = this, e = t._self._c;
   return e("BackgroundModal", t._g({ scopedSlots: t._u([{ key: "header", fn: function() {
-    return [e("div", { staticClass: "flex w-full items-center justify-center", staticStyle: { padding: "calc(0.25 * var(--rem)) calc(1 * var(--rem))", "border-bottom": "1px solid hsl(0, 0%, 88%)" } }, t._l(t.tabs, function(o, r) {
-      return e("CButton", { key: r, staticStyle: { "font-size": "15px", "font-weight": "700", opacity: "0.5", "box-shadow": "none" }, style: t.activeTab === o.value && { opacity: 1 }, on: { click: function(s) {
-        t.activeTab = o.value;
-      } } }, [e("span", { staticClass: "inline-flex items-center justify-center" }, [e("div", { domProps: { innerHTML: t._s(o.icon) } }), e("span", { staticClass: "max-md:!hidden" }, [t._v(t._s(o.label))])])]);
+    return [e("div", { staticClass: "flex w-full items-center justify-center", staticStyle: { padding: "calc(0.25 * var(--rem)) calc(1 * var(--rem))", "border-bottom": "1px solid hsl(0, 0%, 88%)" } }, t._l(t.tabs, function(i, r) {
+      return e("CButton", { key: r, staticStyle: { "font-size": "15px", "font-weight": "700", opacity: "0.5", "box-shadow": "none" }, style: t.activeTab === i.value && { opacity: 1 }, on: { click: function(s) {
+        t.activeTab = i.value;
+      } } }, [e("span", { staticClass: "inline-flex items-center justify-center" }, [e("div", { domProps: { innerHTML: t._s(i.icon) } }), e("span", { staticClass: "max-md:!hidden" }, [t._v(t._s(i.label))])])]);
     }), 1)];
-  }, proxy: !0 }]) }, t.$listeners), [["unsplash", "pexels"].includes(t.activeTab) ? e("BackgroundList", { key: t.activeTab, attrs: { fetch: t.isImage ? t.fetchImage : t.fetchVideo, "credit-text": t.$t("creditVideos", { thing: t.activeTab.capitalize() }), "default-query": "nature" }, on: { select: function(o) {
-    t.isImage ? t.selectImage(o) : t.selectVideo(o);
+  }, proxy: !0 }]) }, t.$listeners), [["unsplash", "pexels"].includes(t.activeTab) ? e("BackgroundList", { key: t.activeTab, attrs: { fetch: t.isImage ? t.fetchImage : t.fetchVideo, "credit-text": t.$t("creditVideos", { thing: t.activeTab.capitalize() }), "default-query": "nature" }, on: { select: function(i) {
+    t.isImage ? t.selectImage(i) : t.selectVideo(i);
   } }, scopedSlots: t._u([{ key: "footer", fn: function() {
     return [e("CButton", { staticStyle: { "margin-left": "0.5em" }, attrs: { disabled: t.isImage ? !t.selectedImage : !t.selectedVideo, type: "secondary" }, on: { click: t.onSave } }, [t._v(" " + t._s(t.$t("_common:save")) + " ")])];
-  }, proxy: !0 }], null, !1, 782343106) }) : t.activeTab === "customVideo" ? e("div", { staticClass: "flex w-full flex-col items-center justify-center" }, [e("div", { staticStyle: { "max-width": "500px", width: "100%", margin: "0 auto", "padding-top": "calc(3 * var(--rem))" } }, [e("div", { staticStyle: { position: "relative", width: "100%", "padding-top": "56.25%", "background-color": "hsl(var(--gray-color-100) / 1)", "border-radius": "0.5em", "margin-bottom": "calc(1.5 * var(--rem))" } }, [t.customVideo ? e("iframe", { staticClass: "custom-video-preview", attrs: { src: t.customVideo.url } }) : t._e()]), e("VideoPlayerInput", { attrs: { filled: !0, "video-options": { background: !0 } }, model: { value: t.customVideo, callback: function(o) {
-    t.customVideo = o;
-  }, expression: "customVideo" } }, [e("CButton", { attrs: { disabled: !t.customVideo, type: "secondary" }, on: { click: t.onSave } }, [t._v(" " + t._s(t.$t("_common:save")) + " ")])], 1)], 1)]) : e("div", { staticClass: "flex flex-col items-center justify-center" }, [e("div", { staticStyle: { "max-width": "500px", width: "100%", margin: "0 auto", "padding-top": "calc(3 * var(--rem))" } }, [e("ImageUploadWrapper", { ref: "uploadWrapper", attrs: { "on-image-upload": t.setCustomBackground }, scopedSlots: t._u([{ key: "default", fn: function({ progress: o }) {
-    return [e("div", { staticClass: "relative mb-6 w-full" }, [t.customImage ? e("img", { staticClass: "h-full w-full object-cover object-scale-down object-top", staticStyle: { "max-height": "500px" }, attrs: { src: t.customImage, alt: t.customImage } }) : e("div", { staticClass: "flex aspect-video flex-col items-center justify-center rounded-md bg-gray-100" }, [e("CButton", { style: t.customImage && { opacity: 0.5 }, attrs: { loading: !!o && o < 100, "icon-left": "upload", type: "none" } }, [t._v(" " + t._s(t.$t("_common:upload")) + " ")]), e("div", { staticClass: "text-center text-gray-600", staticStyle: { "padding-top": "calc(1 * var(--rem))", "font-size": "14px", "max-width": "40ch" } }, [t._v(" " + t._s(t.$t("minWidth")) + " ")])], 1)])];
+  }, proxy: !0 }], null, !1, 782343106) }) : t.activeTab === "customVideo" ? e("div", { staticClass: "flex w-full flex-col items-center justify-center" }, [e("div", { staticStyle: { "max-width": "500px", width: "100%", margin: "0 auto", "padding-top": "calc(3 * var(--rem))" } }, [e("div", { staticStyle: { position: "relative", width: "100%", "padding-top": "56.25%", "background-color": "hsl(var(--gray-color-100) / 1)", "border-radius": "0.5em", "margin-bottom": "calc(1.5 * var(--rem))" } }, [t.customVideo ? e("iframe", { staticClass: "custom-video-preview", attrs: { src: t.customVideo.url } }) : t._e()]), e("VideoPlayerInput", { attrs: { filled: !0, "video-options": { background: !0 } }, model: { value: t.customVideo, callback: function(i) {
+    t.customVideo = i;
+  }, expression: "customVideo" } }, [e("CButton", { attrs: { disabled: !t.customVideo, type: "secondary" }, on: { click: t.onSave } }, [t._v(" " + t._s(t.$t("_common:save")) + " ")])], 1)], 1)]) : e("div", { staticClass: "flex flex-col items-center justify-center" }, [e("div", { staticStyle: { "max-width": "500px", width: "100%", margin: "0 auto", "padding-top": "calc(3 * var(--rem))" } }, [e("ImageUploadWrapper", { ref: "uploadWrapper", attrs: { "on-image-upload": t.setCustomBackground }, scopedSlots: t._u([{ key: "default", fn: function({ progress: i }) {
+    return [e("div", { staticClass: "relative mb-6 w-full" }, [t.customImage ? e("img", { staticClass: "h-full w-full object-cover object-scale-down object-top", staticStyle: { "max-height": "500px" }, attrs: { src: t.customImage, alt: t.customImage } }) : e("div", { staticClass: "flex aspect-video flex-col items-center justify-center rounded-md bg-gray-100" }, [e("CButton", { style: t.customImage && { opacity: 0.5 }, attrs: { loading: !!i && i < 100, "icon-left": "upload", type: "none" } }, [t._v(" " + t._s(t.$t("_common:upload")) + " ")]), e("div", { staticClass: "text-center text-gray-600", staticStyle: { "padding-top": "calc(1 * var(--rem))", "font-size": "14px", "max-width": "40ch" } }, [t._v(" " + t._s(t.$t("minWidth")) + " ")])], 1)])];
   } }]) }), e("div", { staticClass: "flex items-center justify-center" }, [e("CButton", { attrs: { disabled: !t.customImage, type: "secondary" }, on: { click: t.onSave } }, [t._v(" " + t._s(t.$t("_common:save")) + " ")])], 1)], 1)])], 1);
-}, V = [], M = /* @__PURE__ */ y(
-  z,
-  I,
-  V,
+}, T = [], F = /* @__PURE__ */ u(
+  B,
+  M,
+  T,
   !1,
   null,
-  "e2e19b2c"
+  "ebce44fe"
 );
-const T = M.exports, $ = {
+const P = F.exports, R = {
+  name: "CRadioButton",
+  components: {
+    CButton: V
+  },
+  mixins: [A],
+  props: {
+    type: {
+      type: String,
+      default: "primary"
+    },
+    expanded: Boolean
+  },
+  data() {
+    return {
+      isFocused: !1
+    };
+  }
+};
+var j = function() {
+  var t = this, e = t._self._c;
+  return e("div", { staticClass: "control", class: { "is-expanded": t.expanded } }, [e("CButton", { ref: "label", staticClass: "c-radio radio button", class: [{ "is-disabled": t.disabled, "is-focused": t.isFocused }], attrs: { tag: "label", type: t.newValue === t.nativeValue ? t.type : null, size: t.size, disabled: t.disabled }, on: { click: t.focus, keydown: function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "enter", 13, i.key, "Enter") ? null : (i.preventDefault(), t.$refs.$el.label.click());
+  } } }, [t._t("default"), e("input", { directives: [{ name: "model", rawName: "v-model", value: t.computedValue, expression: "computedValue" }], ref: "input", attrs: { disabled: t.disabled, required: t.required, name: t.name, type: "radio" }, domProps: { value: t.nativeValue, checked: t._q(t.computedValue, t.nativeValue) }, on: { click: function(i) {
+    i.stopPropagation();
+  }, focus: function(i) {
+    t.isFocused = !0;
+  }, blur: function(i) {
+    t.isFocused = !1;
+  }, change: function(i) {
+    t.computedValue = t.nativeValue;
+  } } })], 2)], 1);
+}, H = [], q = /* @__PURE__ */ u(
+  R,
+  j,
+  H,
+  !1,
+  null,
+  null
+);
+const D = q.exports, O = {
   name: "HeaderSettings",
   components: {
-    ThemeColorRow: w
+    ThemeColorRow: _,
+    CRadioButton: D,
+    CSwitch: z,
+    CField: L
   },
   mixins: [
     x(
@@ -255,29 +300,29 @@ const T = M.exports, $ = {
   computed: {
     layoutOptions() {
       var t;
-      const { type: i } = ((t = this.items) == null ? void 0 : t[0]) || {};
+      const { type: o } = ((t = this.items) == null ? void 0 : t[0]) || {};
       return [
         {
           // left
-          isActive: this.layout === "vertical" && i === "media",
+          isActive: this.layout === "vertical" && o === "media",
           icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="3" y="6" width="8" height="14" rx="1" fill="currentColor"></rect>',
           onClick: () => this.setLayout({ layout: "vertical", type: "media" })
         },
         {
           // right
-          isActive: this.layout === "vertical" && i === "content",
+          isActive: this.layout === "vertical" && o === "content",
           icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="13" y="6" width="8" height="14" rx="1" fill="currentColor"></rect>',
           onClick: () => this.setLayout({ layout: "vertical", type: "content" })
         },
         {
           // top
-          isActive: this.layout === "horizontal" && i === "media",
+          isActive: this.layout === "horizontal" && o === "media",
           icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="3" y="6" width="18" height="7" rx="1" fill="currentColor"></rect>',
           onClick: () => this.setLayout({ layout: "horizontal", type: "media" })
         },
         {
           // bottom
-          isActive: this.layout === "horizontal" && i === "content",
+          isActive: this.layout === "horizontal" && o === "content",
           icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="3" y="14" width="18" height="5" rx="1" fill="currentColor"></rect>',
           onClick: () => this.setLayout({ layout: "horizontal", type: "content" })
         },
@@ -297,100 +342,100 @@ const T = M.exports, $ = {
     },
     overlayColor: {
       get() {
-        var i;
-        return ((i = this.media) == null ? void 0 : i.overlayColor) || "";
+        var o;
+        return ((o = this.media) == null ? void 0 : o.overlayColor) || "";
       },
-      set(i) {
-        this.media = { ...this.media, overlay: !0, overlayColor: i };
+      set(o) {
+        this.media = { ...this.media, overlay: !0, overlayColor: o };
       }
     },
     background() {
-      let i = "";
-      const { type: t, resourceUrl: e, video: o = {} } = this.media || {};
-      return t === "image" && e ? i = e : t === "video" && o.thumbnail && (i = o.thumbnail), i;
+      let o = "";
+      const { type: t, resourceUrl: e, video: i = {} } = this.media || {};
+      return t === "image" && e ? o = e : t === "video" && i.thumbnail && (o = i.thumbnail), o;
     },
     theme() {
-      var i;
-      return ((i = this._document) == null ? void 0 : i.theme) || {};
+      var o;
+      return ((o = this._document) == null ? void 0 : o.theme) || {};
     },
     showPriceToggle: {
       get() {
         return !!(typeof this.showPriceSummary == "boolean" ? this.showPriceSummary : this.theme.showPriceSummary);
       },
-      set(i) {
-        this.showPriceSummary = i;
+      set(o) {
+        this.showPriceSummary = o;
       }
     }
   },
   watch: {
-    layout(i) {
-      this._document.isDirty(this._value.textAlign) || (this.textAlign = i === "center" ? i : "left");
+    layout(o) {
+      this._document.isDirty(this._value.textAlign) || (this.textAlign = o === "center" ? o : "left");
     },
-    backgroundColor(i) {
-      this._document.isDirty(this._value.textColor) || (this.textColor = A.readability(i, "#fff") < 1.8 ? "#111111" : "#FFFFFF");
+    backgroundColor(o) {
+      this._document.isDirty(this._value.textColor) || (this.textColor = $.readability(o, "#fff") < 1.8 ? "#111111" : "#FFFFFF");
     }
   },
   methods: {
     // Used for setting the correct array item order for specific layouts
     // will place the given item type first in items
-    setLayout({ layout: i, type: t = "" }) {
-      const e = (o) => (r) => r.type === o ? -1 : 1;
-      t && (this.items = [...this.items].sort(e(t))), this.layout = i;
+    setLayout({ layout: o, type: t = "" }) {
+      const e = (i) => (r) => r.type === i ? -1 : 1;
+      t && (this.items = [...this.items].sort(e(t))), this.layout = o;
     },
     openBgModal() {
-      const { type: i = "image" } = this.media || {};
+      const { type: o = "image" } = this.media || {};
       this.$modal.show(
-        T,
+        P,
         {
-          currentType: i
+          currentType: o
         },
         {},
         {
-          input: ({ type: t, value: e, preferredColor: o }) => {
+          input: ({ type: t, value: e, preferredColor: i }) => {
             const r = t === "image" ? "resourceUrl" : "video";
             this.media = {
               ...this.media,
               type: t,
               [r]: e
-            }, o && !this._document.isDirty(this._value.backgroundColor) && (this.backgroundColor = o);
+            }, i && !this._document.isDirty(this._value.backgroundColor) && (this.backgroundColor = i);
           }
         }
       );
     }
   }
 };
-var B = function() {
+var U = function() {
   var t = this, e = t._self._c;
-  return e("div", { staticClass: "d-root" }, [e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title", staticStyle: { "padding-bottom": "calc(0.5 * var(--rem))" } }, [t._v(" Layouts ")]), e("div", { staticClass: "grid grid-cols-3 gap-2 p-1" }, t._l(t.layoutOptions, function({ isActive: o, onClick: r, icon: s }, a) {
-    return e("CButton", { key: a, staticStyle: { padding: "6px 10px", "border-radius": "3px", height: "initial" }, attrs: { type: o ? "secondary" : "none", pattern: o ? "primary" : "secondary", size: "normal" }, on: { click: r } }, [e("svg", { attrs: { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" }, domProps: { innerHTML: t._s(s) } })]);
+  return e("div", { staticClass: "d-root" }, [e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title", staticStyle: { "padding-bottom": "calc(0.5 * var(--rem))" } }, [t._v(" Layouts ")]), e("div", { staticClass: "grid grid-cols-3 gap-2 p-1" }, t._l(t.layoutOptions, function({ isActive: i, onClick: r, icon: s }, a) {
+    return e("CButton", { key: a, staticStyle: { padding: "6px 10px", "border-radius": "3px", height: "initial" }, attrs: { type: i ? "secondary" : "none", pattern: i ? "primary" : "secondary", size: "normal" }, on: { click: r } }, [e("svg", { attrs: { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" }, domProps: { innerHTML: t._s(s) } })]);
   }), 1)]), e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title", staticStyle: { "padding-bottom": "calc(0.5 * var(--rem))" } }, [t._v(" " + t._s(t.$t("_common:background").capitalize()) + " ")]), e("div", { staticClass: "d-option-button-image", style: {
     backgroundImage: `url(${t.background || t.theme.background})`
-  }, on: { click: t.openBgModal } })]), e("div", { staticClass: "d-option", staticStyle: { "padding-bottom": "0.5em" } }, [e("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.overlayColor || t.theme.backgroundFilter || "", placement: "auto" }, on: { change: function(o) {
-    t.overlayColor = o;
-  } } }, [t._v(" " + t._s(t.$t("components:account.documentForm.settings.backgroundFilter")) + " ")])], 1), t.layout === "price" ? e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title" }, [e("div", { staticStyle: { flex: "1 1 auto" } }, [t._v(" " + t._s(t.$t("components:account.documentForm.settings.priceSummaryBackground")) + " ")]), e("CSwitch", { staticStyle: { "margin-right": "0" }, attrs: { size: "small", type: "secondary" }, model: { value: t.showPriceToggle, callback: function(o) {
-    t.showPriceToggle = o;
-  }, expression: "showPriceToggle" } })], 1), t.showPriceToggle ? e("div", { staticClass: "d-option-row", staticStyle: { "padding-top": "1em" } }, [e("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.backgroundColor || t.theme.priceSummaryBackground || "", "picker-options": { disableAlpha: !0 }, placement: "auto" }, on: { change: function(o) {
-    t.backgroundColor = o;
-  } } }, [t._v(" " + t._s(t.$t("_common:backgroundColor").capitalize()) + " ")])], 1) : t._e()]) : [t.layout !== "center" ? e("div", { staticClass: "d-option" }, [e("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.backgroundColor || t.theme.priceSummaryBackground || "", "picker-options": { disableAlpha: !0 }, placement: "auto" }, on: { change: function(o) {
-    t.backgroundColor = o, t._document.setDirty(t._value.backgroundColor);
-  } } }, [t._v(" " + t._s(t.$t("_common:backgroundColor").capitalize()) + " ")])], 1) : t._e(), e("div", { staticClass: "d-option" }, [e("ThemeColorRow", { staticClass: "d-option-title", staticStyle: { "margin-top": "calc(0.5 * var(--rem))" }, attrs: { value: t.textColor || "", "picker-options": { disableAlpha: !0 }, placement: "auto" }, on: { change: function(o) {
-    t.textColor = o, t._document.setDirty(t._value.textColor);
-  } } }, [t._v(" " + t._s(t.$t("_common:textColor").capitalize()) + " ")])], 1), e("div", { staticClass: "d-option flex w-full" }, [e("div", { staticClass: "d-option-title", staticStyle: { "margin-top": "calc(0.5 * var(--rem))" } }, [t._v(" " + t._s(t.$t("_common:textAlign").capitalize()) + " ")]), e("CField", { staticStyle: { "margin-left": "auto" } }, t._l(t.alignOptions, function({ value: o, icon: r }, s) {
-    return e("CRadioButton", { key: s, class: !t.textAlign && "text-gray-400", attrs: { "native-value": o, type: t.textAlign ? "secondary" : "none", size: "small" }, on: { input: function(a) {
+  }, on: { click: t.openBgModal } })]), e("div", { staticClass: "d-option", staticStyle: { "padding-bottom": "0.5em" } }, [e("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.overlayColor || t.theme.backgroundFilter || "", placement: "auto" }, on: { change: function(i) {
+    t.overlayColor = i;
+  } } }, [t._v(" " + t._s(t.$t("components:account.documentForm.settings.backgroundFilter")) + " ")])], 1), t.layout === "price" ? e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title" }, [e("div", { staticStyle: { flex: "1 1 auto" } }, [t._v(" " + t._s(t.$t("components:account.documentForm.settings.priceSummaryBackground")) + " ")]), e("CSwitch", { staticStyle: { "margin-right": "0" }, attrs: { size: "small", type: "secondary" }, model: { value: t.showPriceToggle, callback: function(i) {
+    t.showPriceToggle = i;
+  }, expression: "showPriceToggle" } })], 1), t.showPriceToggle ? e("div", { staticClass: "d-option-row", staticStyle: { "padding-top": "1em" } }, [e("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.backgroundColor || t.theme.priceSummaryBackground || "", "picker-options": { disableAlpha: !0 }, placement: "auto" }, on: { change: function(i) {
+    t.backgroundColor = i;
+  } } }, [t._v(" " + t._s(t.$t("_common:backgroundColor").capitalize()) + " ")])], 1) : t._e()]) : [t.layout !== "center" ? e("div", { staticClass: "d-option" }, [e("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.backgroundColor || t.theme.priceSummaryBackground || "", "picker-options": { disableAlpha: !0 }, placement: "auto" }, on: { change: function(i) {
+    t.backgroundColor = i, t._document.setDirty(t._value.backgroundColor);
+  } } }, [t._v(" " + t._s(t.$t("_common:backgroundColor").capitalize()) + " ")])], 1) : t._e(), e("div", { staticClass: "d-option" }, [e("ThemeColorRow", { staticClass: "d-option-title", staticStyle: { "margin-top": "calc(0.5 * var(--rem))" }, attrs: { value: t.textColor || "", "picker-options": { disableAlpha: !0 }, placement: "auto" }, on: { change: function(i) {
+    t.textColor = i, t._document.setDirty(t._value.textColor);
+  } } }, [t._v(" " + t._s(t.$t("_common:textColor").capitalize()) + " ")])], 1), e("div", { staticClass: "d-option flex w-full" }, [e("div", { staticClass: "d-option-title", staticStyle: { "margin-top": "calc(0.5 * var(--rem))" } }, [t._v(" " + t._s(t.$t("_common:textAlign").capitalize()) + " ")]), e("CField", { staticStyle: { "margin-left": "auto" } }, t._l(t.alignOptions, function({ value: i, icon: r }, s) {
+    return e("CRadioButton", { key: s, class: !t.textAlign && "text-gray-400", attrs: { "native-value": i, type: t.textAlign ? "secondary" : "none", size: "small" }, on: { input: function(a) {
       return t._document.setDirty(t._value.textAlign);
     } }, model: { value: t.textAlign, callback: function(a) {
       t.textAlign = a;
     }, expression: "textAlign" } }, [e("svg", { staticStyle: { margin: "0" }, attrs: { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 48 48", fill: "currentColor", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }, domProps: { innerHTML: t._s(r) } })]);
   }), 1)], 1)]], 2);
-}, P = [], F = /* @__PURE__ */ y(
-  $,
-  B,
-  P,
+}, W = [], E = /* @__PURE__ */ u(
+  O,
+  U,
+  W,
   !1,
   null,
-  "adcf8352"
+  "b3d24efa"
 );
-const q = F.exports;
+const et = E.exports;
 export {
-  q as default
+  et as default
 };

package/dist/{ImageSelectModal-DvQz2VPi.js → ImageSelectModal-De64vGSr.js}

@@ -1,7 +1,7 @@
-import r from "./ImageUploadWrapper-CNQRdHF9.js";
-import { B as l, a as i } from "./index-CFwLDxbi.js";
-import { c, n as d, o as n, J as m } from "./main-BIwKzAN8.js";
-const o = c.unsplash.id, p = {
+import r from "./ImageUploadWrapper-CE6KTze0.js";
+import { B as l, a as c } from "./index-DLa3QER7.js";
+import { c as i, n as d, q as n, P as m } from "./main-U22_wtg0.js";
+const o = i.unsplash.id, p = {
   name: "ImageSelectModal",
   i18nOptions: {
     namespaces: "imageSelectModal",
@@ -16,7 +16,7 @@ const o = c.unsplash.id, p = {
   },
   components: {
     BackgroundModal: l,
-    BackgroundList: i,
+    BackgroundList: c,
     ImageUploadWrapper: r
   },
   data() {
@@ -78,7 +78,7 @@ var u = function() {
   g,
   !1,
   null,
-  "4fdd100a"
+  "23fc60b2"
 );
 const v = h.exports;
 export {

package/dist/{ImageUploadWrapper-CNQRdHF9.js → ImageUploadWrapper-CE6KTze0.js}

@@ -1,5 +1,5 @@
-import Xt from "./BaseUpload-DnhS3hGx.js";
-import { V as k, n as $t, P as Yt } from "./main-BIwKzAN8.js";
+import Xt from "./BaseUpload-B7259IaQ.js";
+import { V as k, n as $t, W as Yt } from "./main-U22_wtg0.js";
 function yt(t, e) {
   var i = Object.keys(t);
   if (Object.getOwnPropertySymbols) {
@@ -1596,7 +1596,7 @@ var je = function() {
   Ie,
   !1,
   null,
-  "66b0d147"
+  "58ebb757"
 );
 const Pe = He.exports;
 export {

package/dist/{Index-PUFeH_1z.js → Index-50KxppUS.js}

@@ -1,10 +1,10 @@
-import { m as e } from "./mapFormMixin-e2PJ431T.js";
-import { n as r } from "./main-BIwKzAN8.js";
+import { m as e } from "./mapFormMixin-BZf4RJIE.js";
+import { n as r } from "./main-U22_wtg0.js";
 const a = {
   name: "EstimatedWorkStartAndEndAtText",
   components: {
-    Read: () => import("./Index-CJeSVpRh.js"),
-    Edit: () => import("./Index-B3Q09phm.js")
+    Read: () => import("./Index-CBRJ-AZi.js"),
+    Edit: () => import("./Index-BoDKKVvL.js")
   },
   mixins: [e(["startAt", "endAt"])]
 };

package/dist/{Index-FC1UsElU.js → Index-B7vVIRFn.js}

@@ -1,10 +1,10 @@
-import { m as o } from "./mapFormMixin-e2PJ431T.js";
-import { n as i } from "./main-BIwKzAN8.js";
+import { m as o } from "./mapFormMixin-BZf4RJIE.js";
+import { n as i } from "./main-U22_wtg0.js";
 const a = {
   name: "NotBinding",
   components: {
-    Edit: () => import("./ToggleBinding-BvIUt1Jx.js"),
-    Read: () => import("./NotBindingText-D2rYFVxr.js")
+    Edit: () => import("./ToggleBinding-B715OVl2.js"),
+    Read: () => import("./NotBindingText-DhsHxvkX.js")
   },
   mixins: [o()]
 };
@@ -18,9 +18,9 @@ var r = function() {
   m,
   !1,
   null,
-  "a3b56101"
+  "8587fb62"
 );
-const p = _.exports;
+const f = _.exports;
 export {
-  p as default
+  f as default
 };

package/dist/{Index-Cfc0Q0AG.js → Index-BUQ75xOU.js}

@@ -1,7 +1,7 @@
-import { m as n } from "./mapFormMixin-e2PJ431T.js";
-import { D as l } from "./DocModalBase-B0wYq3ft.js";
-import { a as o } from "./DocumentLayout-CiszuoQc.js";
-import { n as a } from "./main-BIwKzAN8.js";
+import { m as n } from "./mapFormMixin-BZf4RJIE.js";
+import { D as l } from "./DocModalBase-DkfUBRi3.js";
+import { a as o } from "./DocumentLayout-DmjmsTcx.js";
+import { n as a } from "./main-U22_wtg0.js";
 const c = {
   name: "TermsModal",
   components: {
@@ -66,7 +66,7 @@ const p = f.exports, u = {
   },
   computed: {
     printPdfTerms() {
-      return this.isPdf ? () => import("./PdfTerms-B-lbU_6H.js") : void 0;
+      return this.isPdf ? () => import("./PdfTerms-im6uTd5E.js") : void 0;
     }
   },
   methods: {
@@ -146,7 +146,7 @@ var v = /* @__PURE__ */ a(
   _,
   !1,
   null,
-  "7623e4d6"
+  "1909510f"
 );
 const k = v.exports;
 export {