@orangelogic/design-system 2.45.0 → 2.46.0

package/library/chunks/{color-swatch-group.CMz7zQdk.js → color-swatch-group.Dp0a3l-3.js}

@@ -1,5 +1,5 @@
 import _ from "../components/space.js";
-import { C as z } from "./table.D6Abk0xC.js";
+import { C as z } from "./table.Bz0thu3_.js";
 import { C as $ } from "./typography.trna8y2b.js";
 import { x as h, B as F, i as k, n as p, C as A, c as S } from "./custom-element.fmLrnDZr.js";
 import { C as v, a as m } from "./color-swatch.DkZKPbUq.js";

package/library/chunks/{file-on-demand.CODE3g50.js → file-on-demand.BEr9s0HP.js}

@@ -25,7 +25,7 @@ import Mt from "../components/relative-time.js";
 import { C as Bt } from "./select.Bo8mWJ1g.js";
 import Vt from "../components/space.js";
 import Ht from "../components/tab.js";
-import { C as Wt } from "./tab-group.uF5JbAGa.js";
+import { C as Wt } from "./tab-group.BBZDkdIX.js";
 import Gt from "../components/tab-panel.js";
 import qt from "../components/tooltip.js";
 import { C as Yt } from "./typography.trna8y2b.js";

package/library/chunks/{list-editor.BZMql0Tj.js → list-editor.BZuFeqNq.js}

@@ -2,12 +2,12 @@ import { C as _ } from "./button.DrU92LJQ.js";
 import { C as z } from "./dialog.rme_OwWe.js";
 import M from "../components/grid.js";
 import q from "../components/grid-item.js";
-import $ from "../components/input.js";
-import R from "../components/line-clamp.js";
-import O from "../components/radio.js";
-import k from "../components/radio-group.js";
-import C from "../components/space.js";
-import { C as T, H as P } from "./table.D6Abk0xC.js";
+import C from "../components/input.js";
+import T from "../components/line-clamp.js";
+import R from "../components/radio.js";
+import O from "../components/radio-group.js";
+import $ from "../components/space.js";
+import { C as P, H as k } from "./table.Bz0thu3_.js";
 import { C as I } from "./typography.trna8y2b.js";
 import { i as A, n, C as w, x as l, c as E } from "./custom-element.fmLrnDZr.js";
 import { c as D } from "./component.styles.DtouHn2g.js";
@@ -16,16 +16,16 @@ import { L as S } from "./i18n.D33BKrRs.js";
 import { w as g } from "./watch.BCJD77bD.js";
 import { r as x } from "./state.Dt9F_SuS.js";
 import { e as b } from "./query.BBf1UFkC.js";
-import { r as L } from "./choose.BTbF6BAn.js";
-import { e as j } from "./class-map.DqNfBvJI.js";
+import { r as j } from "./choose.BTbF6BAn.js";
+import { e as L } from "./class-map.DqNfBvJI.js";
 import { c as y } from "./repeat.B1pVpmRx.js";
-import { n as u } from "./when.Dr1es41R.js";
+import { n as m } from "./when.Dr1es41R.js";
 import { t as B } from "./toString.CL_lYXbK.js";
 import H from "../components/icon-button.js";
 import { C as N } from "./image.C9hVXtqX.js";
 import { t as U, a as G, D as v } from "./asset.Ba-CxnNM.js";
 import { a as V } from "./index.Cpamj0jB.js";
-import { A as m } from "./content-builder.UlVFSATk.js";
+import { A as u } from "./content-builder.UlVFSATk.js";
 import { e as J, t as f } from "./string.D6poLUEC.js";
 var X = 0;
 function W(t) {
@@ -78,7 +78,7 @@ var K = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, p = (t, e, i
 };
 let d = class extends w {
   constructor() {
-    super(...arguments), this.localize = new S(this), this.value = "", this.name = "", this.type = m.Image, this.multiple = !1, this.accepts = [], this.required = !1, this.disabled = !1, this.onRequestAsset = void 0;
+    super(...arguments), this.localize = new S(this), this.value = "", this.name = "", this.type = [u.Image], this.multiple = !1, this.accepts = [], this.required = !1, this.disabled = !1, this.onRequestAsset = void 0;
   }
   async handleRequestAssetClick() {
     if (this.onRequestAsset)
@@ -89,7 +89,7 @@ let d = class extends w {
           }
         });
         const t = await this.onRequestAsset(
-          this.type,
+          this.type.join(" "),
           this.multiple,
           this.accepts
         );
@@ -107,7 +107,7 @@ let d = class extends w {
         } else {
           const { id: i, name: r, src: s, type: c } = t;
           let h = s;
-          c === m.Audio && (h = (await G({
+          c === u.Audio && (h = (await G({
             extraFields: [v],
             recordIds: [i]
           })).items[0]?.[v]), h && this.emit("cx-content-builder-asset-select", {
@@ -136,6 +136,45 @@ let d = class extends w {
   handleDeleteClick() {
     this.emit("cx-content-builder-asset-delete");
   }
+  /** True when the picker accepts this asset type. */
+  acceptsType(t) {
+    return this.type.includes(t);
+  }
+  renderAssetPreview() {
+    if (this.value && this.acceptsType(u.Image))
+      return l`<cx-image
+        part="image"
+        class="asset-picker__image"
+        src=${this.value}
+        alt=${this.name}
+        width="200px"
+        object-fit=${V.Cover}
+      ></cx-image>`;
+    if (this.name && this.acceptsType(u.Video))
+      return l`
+       <cx-typography variant="body-2">
+       ${f(this.name, 30, 11, 11)}
+       </cx-typography>`;
+    if (this.name && this.acceptsType(u.Other)) {
+      const t = this.name.split(",");
+      return l`<cx-typography variant="body-2">
+        ${f(t[0], 30, 11, 11)}
+
+        ${m(
+        t.length > 1,
+        () => l` ${this.localize.term("andOthers", t.length - 1)}`
+      )}
+      </cx-typography>`;
+    }
+    if (this.name && this.acceptsType(u.All)) {
+      const t = this.name.split(",");
+      return l`<cx-typography variant="body-2">
+        ${f(t[0], 30, 11, 11)}
+        ${m(t.length > 1, () => l` ${this.localize.term("andOthers", t.length - 1)}`)}
+      </cx-typography>`;
+    }
+    return null;
+  }
   render() {
     return l`
       <cx-space
@@ -143,46 +182,10 @@ let d = class extends w {
         class="asset-picker"
         spacing="2x-small"
         direction="horizontal"
-        align-items=${this.type === m.Image ? "flex-start" : "center"}
+        align-items=${this.acceptsType(u.Image) ? "flex-start" : "center"}
       >
-        ${u(
-      this.value && this.type === m.Image,
-      () => l`<cx-image
-              part="image"
-              class="asset-picker__image"
-              src=${this.value}
-              alt=${this.name}
-              width="200px"
-              object-fit=${V.Cover}
-            ></cx-image>`
-    )}
-        ${u(
-      this.type === m.Video && this.name,
-      () => l`<cx-typography variant="body-2">
-              ${f(this.name, 30, 11, 11)}
-            </cx-typography>`
-    )}
-        ${u(this.type === m.Other && this.name, () => {
-      const t = this.name.split(",");
-      return l`<cx-typography variant="body-2">
-            ${f(t[0], 30, 11, 11)}
-            ${u(
-        t.length > 1,
-        () => l` ${this.localize.term("andOthers", t.length - 1)}`
-      )}
-          </cx-typography>`;
-    })}
-        ${u(this.type === m.All && this.name, () => {
-      const t = this.name.split(",");
-      return l`<cx-typography variant="body-2">
-            ${f(t[0], 30, 11, 11)}
-            ${u(
-        t.length > 1,
-        () => l` ${this.localize.term("andOthers", t.length - 1)}`
-      )}
-          </cx-typography>`;
-    })}
-        ${u(
+        ${this.renderAssetPreview()}
+        ${m(
       !this.disabled,
       () => l`
             <div class="asset-picker__button-container">
@@ -202,7 +205,7 @@ let d = class extends w {
                 ${this.localize.term("choose")}
               </cx-button>
             </div>
-            ${u(
+            ${m(
         this.value,
         () => l`<cx-icon-button
                   label=${this.localize.term("delete")}
@@ -222,8 +225,8 @@ d.dependencies = {
   "cx-button": _,
   "cx-icon-button": H,
   "cx-image": N,
-  "cx-input": $,
-  "cx-space": C,
+  "cx-input": C,
+  "cx-space": $,
   "cx-typography": I
 };
 p([
@@ -239,7 +242,13 @@ p([
   n({ reflect: !0, type: String })
 ], d.prototype, "name", 2);
 p([
-  n({ reflect: !0, type: String })
+  n({
+    converter: {
+      fromAttribute: (t) => (t ?? "").split(" ").filter((e) => e !== ""),
+      toAttribute: (t) => t.join(" ")
+    },
+    reflect: !0
+  })
 ], d.prototype, "type", 2);
 p([
   n({ reflect: !0, type: Boolean })
@@ -346,7 +355,7 @@ let a = class extends w {
         }
       ],
       options: {
-        placement: P.Right
+        placement: k.Right
       }
     }, this.OMITTED_FIELDS = ["id"];
   }
@@ -445,7 +454,7 @@ let a = class extends w {
         <div class="list-editor">
           <cx-table
             part="table"
-            class=${j({
+            class=${L({
       "list-editor__table": !0,
       "list-editor__table--no-header": this.noHeader
     })}
@@ -474,7 +483,7 @@ let a = class extends w {
               <cx-typography variant="h4">
                 ${this.isAdding ? this.addDialogLabel : this.editDialogLabel}
               </cx-typography>
-              ${u(
+              ${m(
       !this.isAdding && this.editedItem?.[this.displayField],
       () => l`<cx-typography variant="body3">
                     <cx-line-clamp lines="1">
@@ -493,7 +502,7 @@ let a = class extends w {
                       </cx-typography>
                     </cx-grid-item>
                     <cx-grid-item xs="3" sm="2">
-                      ${L(
+                      ${j(
         this.columnsMap[t].controlType,
         [
           [
@@ -590,7 +599,7 @@ let a = class extends w {
             </cx-space>
           </cx-dialog>
         </div>
-        ${u(
+        ${m(
       this.canAdd,
       () => l`
             <cx-button
@@ -614,12 +623,12 @@ a.dependencies = {
   "cx-dialog": z,
   "cx-grid": M,
   "cx-grid-item": q,
-  "cx-input": $,
-  "cx-line-clamp": R,
-  "cx-radio": O,
-  "cx-radio-group": k,
-  "cx-space": C,
-  "cx-table": T,
+  "cx-input": C,
+  "cx-line-clamp": T,
+  "cx-radio": R,
+  "cx-radio-group": O,
+  "cx-space": $,
+  "cx-table": P,
   "cx-typography": I
 };
 o([

package/library/chunks/{tab-group.uF5JbAGa.js → tab-group.BBZDkdIX.js}

@@ -2358,6 +2358,10 @@ const Ao = Fn`
       var(--cx-transition-fast) width ease;
   }
 
+  .tab-group--timeline .tab-group__indicator {
+    display: none !important;
+  }
+
   .tab-group__dropdown {
     position: absolute;
     z-index: 1;

package/library/chunks/{table.D6Abk0xC.js → table.Bz0thu3_.js}

@@ -1489,10 +1489,12 @@ const Bs = Yt`
   }
 
   .tabulator
-    .tabulator-tableholder
     .tabulator-placeholder
     .tabulator-placeholder-contents {
-    display: inline-block;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
     text-align: center;
     padding: var(--cx-spacing-small);
     color: var(--placeholder-color);

package/library/components/atoms.js

@@ -64,8 +64,8 @@ import { default as Ro } from "./step.js";
 import { default as Do } from "./stepper.js";
 import { default as yo } from "./switch.js";
 import { default as Mo } from "./tab.js";
-import { C as Oo } from "../chunks/tab-group.uF5JbAGa.js";
-import { C as wo } from "../chunks/table.D6Abk0xC.js";
+import { C as Oo } from "../chunks/tab-group.BBZDkdIX.js";
+import { C as wo } from "../chunks/table.Bz0thu3_.js";
 import { default as Fo } from "./tab-panel.js";
 import { default as No } from "./tag.js";
 import { default as Eo } from "./textarea.js";

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

@@ -1,10 +1,10 @@
 import "./space.js";
-import "../chunks/table.D6Abk0xC.js";
+import "../chunks/table.Bz0thu3_.js";
 import "../chunks/typography.trna8y2b.js";
 import "../chunks/custom-element.fmLrnDZr.js";
 import "../chunks/color-swatch.DkZKPbUq.js";
 import "../chunks/component.styles.DtouHn2g.js";
-import { C as n } from "../chunks/color-swatch-group.CMz7zQdk.js";
+import { C as n } from "../chunks/color-swatch-group.Dp0a3l-3.js";
 import "../chunks/content-builder.UlVFSATk.js";
 import "../chunks/popup.CJrePm7n.js";
 import "../chunks/i18n.D33BKrRs.js";

package/library/components/file-on-demand.js

@@ -1,4 +1,4 @@
-import { C as J } from "../chunks/file-on-demand.CODE3g50.js";
+import { C as J } from "../chunks/file-on-demand.BEr9s0HP.js";
 import "./avatar.js";
 import "../chunks/button.DrU92LJQ.js";
 import "../chunks/dialog.rme_OwWe.js";
@@ -14,7 +14,7 @@ import "./relative-time.js";
 import "../chunks/select.Bo8mWJ1g.js";
 import "./space.js";
 import "./tab.js";
-import "../chunks/tab-group.uF5JbAGa.js";
+import "../chunks/tab-group.BBZDkdIX.js";
 import "./tab-panel.js";
 import "./tooltip.js";
 import "../chunks/tree.DynOxJWg.js";

package/library/components/list-editor.js

@@ -7,7 +7,7 @@ import "./line-clamp.js";
 import "./radio.js";
 import "./radio-group.js";
 import "./space.js";
-import "../chunks/table.D6Abk0xC.js";
+import "../chunks/table.Bz0thu3_.js";
 import "../chunks/typography.trna8y2b.js";
 import "../chunks/custom-element.fmLrnDZr.js";
 import "../chunks/component.styles.DtouHn2g.js";
@@ -20,7 +20,7 @@ import "../chunks/choose.BTbF6BAn.js";
 import "../chunks/class-map.DqNfBvJI.js";
 import "../chunks/repeat.B1pVpmRx.js";
 import "../chunks/when.Dr1es41R.js";
-import { c as v, C as w } from "../chunks/list-editor.BZMql0Tj.js";
+import { c as v, C as w } from "../chunks/list-editor.BZuFeqNq.js";
 export {
   v as columnDefaults,
   w as default

package/library/components/molecules.js

@@ -6,7 +6,7 @@ import { default as u } from "./corner-position-input-group.js";
 import { C as m } from "../chunks/cropper.3qRm5dEe.js";
 import { default as i } from "./dynamic-select.js";
 import { C as c } from "../chunks/folder-select.ChFCJ-w0.js";
-import { C as P } from "../chunks/list-editor.BZMql0Tj.js";
+import { C as P } from "../chunks/list-editor.BZuFeqNq.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,6 +1,6 @@
 import { default as a } from "./asset-link-format.js";
-import { C as t } from "../chunks/color-swatch-group.CMz7zQdk.js";
-import { C } from "../chunks/file-on-demand.CODE3g50.js";
+import { C as t } from "../chunks/color-swatch-group.Dp0a3l-3.js";
+import { C } from "../chunks/file-on-demand.BEr9s0HP.js";
 export {
   a as CxAssetLinkFormat,
   t as CxColorSwatchGroup,

package/library/components/tab-group.js

@@ -1,7 +1,7 @@
 import "./resize-observer.js";
 import "../chunks/custom-element.fmLrnDZr.js";
 import "../chunks/component.styles.DtouHn2g.js";
-import { C as w } from "../chunks/tab-group.uF5JbAGa.js";
+import { C as w } from "../chunks/tab-group.BBZDkdIX.js";
 import "../chunks/i18n.D33BKrRs.js";
 import "../chunks/scroll.DwPiX2Ox.js";
 import "../chunks/watch.BCJD77bD.js";

package/library/components/table.js

@@ -7,7 +7,7 @@ import "../chunks/custom-element.fmLrnDZr.js";
 import "../chunks/component.styles.DtouHn2g.js";
 import "../chunks/overlayscrollbars.BhATcEys.js";
 import "../chunks/pagination.y5oqoPVr.js";
-import { A as b, l as w, n as T, e as x, c as z, o as F, p as P, d as S, a5 as v, a6 as y, D as A, q as g, E as D, s as I, F as h, t as E, u as G, v as f, G as j, w as H, x as K, y as L, I as V, z as k, K as q, B, M as J, J as N, L as O, N as Q, O as U, Q as W, U as X, V as Y, P as Z, h as _, W as $, k as oo, X as eo, Y as ao, Z as so, _ as lo, j as uo, R as to, a0 as Mo, $ as ro, S as io, a1 as no, a2 as po, T as mo, b as Co, a3 as Ro, a4 as co, C as bo } from "../chunks/table.D6Abk0xC.js";
+import { A as b, l as w, n as T, e as x, c as z, o as F, p as P, d as S, a5 as v, a6 as y, D as A, q as g, E as D, s as I, F as h, t as E, u as G, v as f, G as j, w as H, x as K, y as L, I as V, z as k, K as q, B, M as J, J as N, L as O, N as Q, O as U, Q as W, U as X, V as Y, P as Z, h as _, W as $, k as oo, X as eo, Y as ao, Z as so, _ as lo, j as uo, R as to, a0 as Mo, $ as ro, S as io, a1 as no, a2 as po, T as mo, b as Co, a3 as Ro, a4 as co, C as bo } from "../chunks/table.Bz0thu3_.js";
 import "../chunks/i18n.D33BKrRs.js";
 import "../chunks/watch.BCJD77bD.js";
 import "../chunks/state.Dt9F_SuS.js";

package/library/components/types.js

@@ -64,8 +64,8 @@ import { default as oGt } from "./step.js";
 import { default as sGt } from "./stepper.js";
 import ek from "./switch.js";
 import tk from "./tab.js";
-import { C as nk, T as m9, a as f9, b as v9, g as q7 } from "../chunks/tab-group.uF5JbAGa.js";
-import { C as OR, f as jh, i as IR, r as oY, m as aY, a as V7, g as W7 } from "../chunks/table.D6Abk0xC.js";
+import { C as nk, T as m9, a as f9, b as v9, g as q7 } from "../chunks/tab-group.BBZDkdIX.js";
+import { C as OR, f as jh, i as IR, r as oY, m as aY, a as V7, g as W7 } from "../chunks/table.Bz0thu3_.js";
 import y9 from "./tab-panel.js";
 import { default as lGt } from "./tag.js";
 import sY from "./textarea.js";
@@ -95,7 +95,7 @@ import { c as ib, b as DY } from "../chunks/capitalize.CNStXZBq.js";
 import { o as nr } from "../chunks/style-map.lEJHEwk3.js";
 import { a as ob, d as MY, e as PY, D as q_, u as NY, t as fc, f as BR } from "../chunks/asset.Ba-CxnNM.js";
 import { H as LY } from "../chunks/slot.DJLm4Dig.js";
-import { a as k9, u as Gu, C as RY } from "../chunks/list-editor.BZMql0Tj.js";
+import { a as k9, u as Gu, C as RY } from "../chunks/list-editor.BZuFeqNq.js";
 import BY from "./bicolor-picker.js";
 import zR from "./border-input-group.js";
 import { p as FR, c as xm, b as km, d as zY, e as FY, g as V_ } from "../chunks/color-swatch.DkZKPbUq.js";
@@ -112,16 +112,16 @@ import { F as Ku, C as E9, a as W_ } from "../chunks/folder-select.ChFCJ-w0.js";
 import { a as Io, E as Fn, b as Um, O as Ld, T as Fu, G as nO } from "../chunks/index.Cpamj0jB.js";
 import { C as EGt } from "../chunks/index.Cpamj0jB.js";
 import { g as T9, c as ry } from "../chunks/_commonjsHelpers.ByX85dGu.js";
-import { b as Qf, a as UR, d as rO, c as ok, s as GY, o as KY, U as A9, e as qR, i as Kd, f as YY } from "../chunks/file-on-demand.CODE3g50.js";
-import { C as AGt } from "../chunks/file-on-demand.CODE3g50.js";
+import { b as Qf, a as UR, d as rO, c as ok, s as GY, o as KY, U as A9, e as qR, i as Kd, f as YY } from "../chunks/file-on-demand.BEr9s0HP.js";
+import { C as AGt } from "../chunks/file-on-demand.BEr9s0HP.js";
 import { e as XY, t as JY } from "../chunks/directive.oAbCiebi.js";
 import { f as ZY, n as kl, e as _l } from "../chunks/ref.BDmlFGTP.js";
 import QY from "./masonry.js";
 import eX from "./padding-input-group.js";
 import tX from "./position-picker.js";
 import { D as Uw, P as G_, E as dd, B as ft, a as Af, A as ig, b as nX, T as iO } from "../chunks/content-builder.UlVFSATk.js";
-import { g as rX, a as oO, b as qw } from "../chunks/color-swatch-group.CMz7zQdk.js";
-import { C as IGt } from "../chunks/color-swatch-group.CMz7zQdk.js";
+import { g as rX, a as oO, b as qw } from "../chunks/color-swatch-group.Dp0a3l-3.js";
+import { C as IGt } from "../chunks/color-swatch-group.Dp0a3l-3.js";
 import iX from "./shadow-input-group.js";
 import { default as MGt } from "./share-option-list.js";
 import { default as NGt } from "./sidebar.js";
@@ -111328,7 +111328,7 @@ let Na = class extends zn {
                 id=${this.editedImage.id}
                 name="src"
                 required
-                type="image"
+                type="image audio"
                 value=${Cr(this.editedImage.src)}
                 ?disabled=${this.disabledAssetPicker}
                 .onRequestAsset=${this.onRequestAsset}

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.45.0",
+  "version": "2.46.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/molecules/src/asset-picker/asset-picker.d.ts

@@ -5,7 +5,7 @@ import { default as CxInput } from '../../../atoms/src/components/input/input.ts
 import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
 import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
-import { Asset, AssetType } from '../../../types/src/content-builder';
+import { Asset, AssetType, AssetTypeString } from '../../../types/src/content-builder';
 
 /**
  * @summary The `cx-asset-picker` component lets users choose and clear assets for a trait/control.
@@ -36,7 +36,7 @@ export default class CxAssetPicker extends CortexElement {
      * The type of the asset being picked.
      * It can be either an image or a video.
      */
-    type: AssetType;
+    type: AssetType[];
     /**
      * Whether the asset picker should allow multiple assets to be selected.
      */
@@ -54,10 +54,13 @@ export default class CxAssetPicker extends CortexElement {
      * A callback function that is called when the user requests to select an asset.
      * It should return a promise that resolves to an Asset object.
      */
-    onRequestAsset: ((type: AssetType, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
+    onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
     private handleRequestAssetClick;
     handleValueChange(): Promise<void>;
     private handleDeleteClick;
+    /** True when the picker accepts this asset type. */
+    private acceptsType;
+    private renderAssetPreview;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/library/packages/molecules/src/icon-picker/icon-picker.d.ts

@@ -6,7 +6,7 @@ import { default as CxSpace } from '../../../atoms/src/components/space/space.ts
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { CxAssetPickerSelectEvent } from '../../../events/src/events.ts';
 import { default as CxAssetPicker } from '../asset-picker/asset-picker.ts';
-import { Asset, AssetType } from '../../../types/src/content-builder';
+import { Asset, AssetTypeString } from '../../../types/src/content-builder';
 import { CSSResultGroup, nothing } from 'lit';
 
 type IconData = {
@@ -46,7 +46,7 @@ export default class CxIconPicker extends CortexElement {
      * @returns A promise that resolves to an Asset object.
      * @default undefined
      */
-    onRequestAsset: ((type: AssetType, multiple?: boolean) => Promise<Asset | Record<string, Asset>>) | undefined;
+    onRequestAsset: ((type: AssetTypeString, multiple?: boolean) => Promise<Asset | Record<string, Asset>>) | undefined;
     searchTerm: string;
     /**
      * Need to mount or unmount virtualizer when select is shown or hidden

package/library/packages/molecules/src/list-editor/list-editor.d.ts

@@ -10,7 +10,7 @@ import { default as CxSpace } from '../../../atoms/src/components/space/space.ts
 import { default as CxTable } from '../../../atoms/src/components/table/table.ts';
 import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
-import { Asset, AssetType } from '../../../types/src/content-builder';
+import { Asset, AssetTypeString } from '../../../types/src/content-builder';
 import { CSSResultGroup } from 'lit';
 import { default as CxAssetPicker } from '../asset-picker/asset-picker';
 
@@ -66,7 +66,7 @@ export default class CxListEditor extends CortexElement {
      * @returns A promise that resolves to an Asset object.
      * @default undefined
      */
-    onRequestAsset: ((type: AssetType, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
+    onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
     editedItem: Record<string, string> | null;
     isAdding: boolean;
     private columnsMap;

package/library/packages/organisms/src/content-builder/components/config-form/config-form.d.ts

@@ -40,7 +40,7 @@ import { default as CxPaddingInputGroup } from '../../../../../molecules/src/pad
 import { default as CxPositionPicker } from '../../../../../molecules/src/position-picker/position-picker.ts';
 import { default as CxShadowInputGroup } from '../../../../../molecules/src/shadow-input-group/shadow-input-group.ts';
 import { default as CxSizeInputGroup } from '../../../../../molecules/src/size-input-group/size-input-group.ts';
-import { Asset, AssetType, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
+import { Asset, AssetTypeString, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
 import { StyleProps } from 'grapesjs';
 import { CxColorSwatchPicker } from '../color-swatch-picker';
 import { CxFolderPicker } from '../folder-picker';
@@ -174,7 +174,7 @@ export default class CxConfigForm extends CortexElement {
      * @returns A promise that resolves to an Asset object.
      * @default undefined
      */
-    onRequestAsset: ((type: AssetType, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
+    onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
     /**
      * Function to request a download format.
      * This is used to download an asset in a different format.

package/library/packages/organisms/src/content-builder/components/config-manager/config-manager.d.ts

@@ -1,6 +1,6 @@
 import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../../base/src/cortex-element.ts';
-import { Asset, AssetType, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
+import { Asset, AssetTypeString, EditorMode, PropertyConfig } from '../../../../../types/src/content-builder';
 import { Component, StyleProps } from 'grapesjs';
 import { CxConfigForm } from '../config-form';
 
@@ -76,7 +76,7 @@ export default class CxConfigManager extends CortexElement {
      * @returns A promise that resolves to an Asset object.
      * @default undefined
      */
-    onRequestAsset: ((type: AssetType, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
+    onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset | Record<string, Asset>>) | undefined;
     /**
      * Function to request a download format.
      * This is used to download an asset in a different format.

package/library/packages/organisms/src/content-builder/components/gallery-config/gallery-config.d.ts

@@ -13,7 +13,7 @@ import { default as CortexElement } from '../../../../../base/src/cortex-element
 import { default as CxAssetPicker } from '../../../../../molecules/src/asset-picker/asset-picker.ts';
 import { default as CxDynamicSelect } from '../../../../../molecules/src/dynamic-select/dynamic-select.ts';
 import { default as CxFolderSelect } from '../../../../../molecules/src/folder-select/folder-select.ts';
-import { Asset, AssetType, DialogType } from '../../../../../types/src/content-builder';
+import { Asset, AssetTypeString, DialogType } from '../../../../../types/src/content-builder';
 import { Image } from '../../../../../types/src/gallery-config';
 import { GalleryItemCardType } from '../../../../../types/src/gallery-item';
 import { default as CxFolderPicker } from '../folder-picker/folder-picker';
@@ -59,7 +59,7 @@ export default class CxGalleryConfig extends CortexElement {
     /**
      * A callback function that is called when the user requests to select an asset.
      */
-    onRequestAsset: ((type: AssetType) => Promise<Asset>) | undefined;
+    onRequestAsset: ((type: AssetTypeString) => Promise<Asset>) | undefined;
     /**
      * The image being edited. If not provided, a new image will be created.
      */

package/library/packages/organisms/src/content-builder/components/gallery-picker/gallery-picker.d.ts

@@ -4,7 +4,7 @@ import { default as CxSpace } from '../../../../../atoms/src/components/space/sp
 import { default as CxTypography } from '../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement, CortexFormControl } from '../../../../../base/src/cortex-element.ts';
 import { default as CxMasonry } from '../../../../../molecules/src/masonry/masonry.ts';
-import { Asset, AssetType, DialogType } from '../../../../../types/src/content-builder';
+import { Asset, AssetTypeString, DialogType } from '../../../../../types/src/content-builder';
 import { SourceVariant } from '../../../../../types/src/gallery';
 import { Image } from '../../../../../types/src/gallery-config';
 import { GalleryItemCardType } from '../../../../../types/src/gallery-item';
@@ -61,7 +61,7 @@ export default class CxGalleryPicker extends CortexElement implements CortexForm
      * the same document or shadow root for this to work.
      */
     form: string | HTMLElement | undefined;
-    onRequestAsset: ((type: AssetType, multiple?: boolean, accepts?: string[]) => Promise<Asset>) | undefined;
+    onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset>) | undefined;
     loading: boolean;
     masonryData: Array<{
         alt?: string;

package/library/packages/organisms/src/content-builder/content-builder.d.ts

@@ -3,7 +3,7 @@ import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
 import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts';
 import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
-import { Asset, AssetType, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
+import { Asset, AssetTypeString, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
 import { Component, Editor, StyleProps } from 'grapesjs';
 import { TemplateResult } from 'lit';
 import { CxBlockPicker } from './components/block-picker';
@@ -229,7 +229,7 @@ export default class CxContentBuilder extends CortexElement {
     runFirstUpdated(): void;
     disconnectedCallback(): void;
     handleBuilderPropsChange(): void;
-    onRequestAsset(type: AssetType): Promise<Asset>;
+    onRequestAsset(type: AssetTypeString): Promise<Asset>;
     onRequestDownloadFormat(assetIds: string[], formats?: Record<string, string[]>): Promise<{}>;
     /**
      * This method retrieves all the components of the specified component.

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/components/rte-bubble-menu/image-dialog.d.ts

@@ -14,7 +14,7 @@ import { default as CxSpinner } from '../../../../../../../atoms/src/components/
 import { default as CxTypography } from '../../../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../../../../base/src/cortex-element.ts';
 import { default as CxBorderInputGroup } from '../../../../../../../molecules/src/border-input-group/border-input-group.ts';
-import { Asset, AssetType, RTE_IMAGE } from '../../../../../../../types/src/content-builder';
+import { Asset, AssetTypeString, RTE_IMAGE } from '../../../../../../../types/src/content-builder';
 import { PropertyValues } from 'lit';
 
 /**
@@ -58,7 +58,7 @@ export default class CxImageDialog extends CortexElement {
      * A callback function that is called when the user requests to select an asset.
      * It should return a promise that resolves to an Asset object.
      */
-    onRequestAsset: ((type: AssetType, multiple?: boolean, accepts?: string[]) => Promise<Asset>) | undefined;
+    onRequestAsset: ((type: AssetTypeString, multiple?: boolean, accepts?: string[]) => Promise<Asset>) | undefined;
     isValidSrc: boolean | undefined;
     originalSize: {
         height: number;

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/components/rte-bubble-menu/rte-bubble-menu.d.ts

@@ -16,7 +16,7 @@ import { default as CxSelect } from '../../../../../../../atoms/src/components/s
 import { default as CxSpace } from '../../../../../../../atoms/src/components/space/space.ts';
 import { default as CxTypography } from '../../../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../../../../base/src/cortex-element.ts';
-import { Asset, AssetType } from '../../../../../../../types/src/content-builder';
+import { Asset, AssetTypeString } from '../../../../../../../types/src/content-builder';
 import { Component } from 'grapesjs';
 import { TemplateResult } from 'lit';
 import { default as CxAnchorDialog } from './anchor-dialog';
@@ -139,7 +139,7 @@ export default class CxRTEBubbleMenu extends CortexElement {
      * @returns A promise that resolves to an Asset object.
      * @default undefined
      */
-    onRequestAsset: ((type: AssetType) => Promise<Asset>) | undefined;
+    onRequestAsset: ((type: AssetTypeString) => Promise<Asset>) | undefined;
     singleRow: boolean;
     private isBulletListOpen;
     private isOrderedListOpen;

package/library/packages/types/src/content-builder.d.ts

@@ -153,6 +153,7 @@ export declare enum AssetType {
     Other = "other",
     Video = "video"
 }
+export type AssetTypeString = AssetType | `${AssetType} ${AssetTypeString}`;
 export type Asset = {
     id: string;
     name: string;

package/library/react-web-component.d.ts

@@ -5051,7 +5051,7 @@
         /**
           * The type of the asset being picked. It can be either an image or a video.
         */
-        type?: 'all' | 'audio' | 'image' | 'other' | 'video';
+        type?: 'all' | 'audio' | 'image' | 'other' | 'video'[];
         /**
           * Whether the asset picker should allow multiple assets to be selected.
         */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.45.0",
+  "version": "2.46.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {